How do I position one image overlaid by another image? - html

I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!

A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div

you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative

Related

Z-index strip inside wrapper visible on the whole page

i would like to get to result of the blue strip in the picture bellow.
Its inside the wrapper so the HTML is like this:
<body>
<div class="wrapper">
<div class="strap"></div>
</div>
</body>
I know its done with z-index. The strap should be visible on the whole page. Thanks for help
Use the following CSS. The code sets the position to absolute and then positions each point of the div to each corner of the window, top, bottom, left and right. Z-index will bring it to the front. Ensure that there are no other elements that use z-index with a greater value than 99. The background color is then set as white with 40% transparency; Adjust the 0.6 to what you need it to be. 0.8 for example would be less transparent.
.strap{
display: block;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
z-index:99;
background-color: rgba(255,255,255,0.6);
}
Use the css attribute position absolute and use top,right,left,bottom for alignment. And use z index to make it appear on top of that wrapper make sure the width is 100% ...

Create a div that appears after scroll, stays permanently at bottom of page

I am trying to create a 'back to top' image, it needs to stick to the bottom right corner of the page.
I have created the div with the image but I do not know what is the best way to make it permanently stay at the bottom of the page. Is it best to use absolute positioning?
Also, I want the div to only appear when the user has scrolled past a certain point, and to fade in (or something similar?)
I have looked online but can't find anything that does what I want. I tried simply getting the div to stick to the bottom but the tutorials I have been using show how to create footers, rather than just one small graphic, so it doesn't work as well.
What are the best practices for this? Any help appreciated!
How about this:
http://jsfiddle.net/uRN64/1
HTML
<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>
<div style='height:1200px; background-color:orange'>Try Scrolling me</div>​
JS
$(function(){
$(window).scroll(function() {
$('#log').toggle($(document).scrollTop() > 100);
});
})
​
To fade:
Change: $('#log').toggle($(document).scrollTop() > 100); to
$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();
Let say you have a div
<div class="bottom">Your Img</div>
Apply fixed position to the div as we want the div to appear fixed.
By doing so we can freely move the div to our desired area.
Then by applying CSS property right:0; and bottom:0; we can move the div to the right most and the bottom most position on the page.
HTML:
<div class="bottom"></div>
CSS:
.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0;
bottom:0;
}​
Here is a Live Example

Captions on an image with CSS

I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.
This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.
But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.
How can I fix this?
check out this jsfiddle:
http://jsfiddle.net/56J8y/1/
relevant CSS
.meme_container {
position: relative;
}
.meme_container .top_meme {
position:absolute;
top:0;
left:0;
}
.meme_container .bottom_meme {
position:absolute;
bottom:0;
left:0;
}
​
and the html
<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>​
One way is to use Pseudo element like :after and :before
Example:
img:after {
content: "Hello, I am the caption";
}
I think you are talking about this situation:
<div>
<img />
<p class="first">caption1</p>
<p class="second">caption2</p>
</div>
Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!!
div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};

make 2 images overlap

I am using JS to write HTML code where I need to display 2 images exactly overlapped.
The height and width of both are same.
What CSS properties can I use to do this?
Position relative on the container, and absolute on the images:
All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.
position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).
<div id="container">
<img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
<img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>
#container{
position:relative;
}
#container img{
position:absolute;
top:0;
left:0;
}
.hide:hover{
opacity:0;
}​
http://jsfiddle.net/BLbhJ/1/
Edit: Added your hide functionality
Play around with the css in this:
http://jsfiddle.net/zuZxD/
I used opacity to display the overlapping.
<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D
If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;

Is it possible to fix an image to a webpage with a fluid layout?

I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
<div class="grid_16">
<h1 id="branding">
<img src="img/logo.png" />
<img src="img/float.png" class="imgFloat" />
</h1>
</div>
The only "issue" (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.
If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.
Is there a happy medium CSS "trick" that I can apply to achieve this result?
Thanks in advanced!
You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.
So:
tag(position:relative)
ag(position:absolute; left:2px)
Should work
I'm just guessing here since the code you're showing is not detailed enough ;)
Update:
#branding {position:relative}
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
set position: relative on the header element that wraps the .imgFloat element that should lock an absolutely positioned element to the wrapper.
Also you'll need to change your positions since the left will be relative to the 0,0 coordinate of the wrapper element.