CODEWITHSUNDEEP
htmlcsscss-position
KaHeL
KaHeL

Reputation: 4371

Overlaying of two image with text on below

I'm trying to implement an image that has an image overlayed on it. Since I need to tell that this image has a video content on it. Now from some post here I've encountered this code (pardon me I lost the link) which actually works but problem is it also overlay the text content below the images. For reference of what exactly I'm trying to achieve I have this code here. I just hardcoded on what I wanted to see and here's the code anyways:

<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

<div><br /><br /><br /><br /><br /><br />Text should be below the image</div>

I just need to fix the part where images overlaps on my text as well. Thanks!

Upvotes: 1

Views: 59

Answers (2)

Halfpint
Halfpint

Reputation: 4077

Currently your divs overlap because you have the parent container set to a fixed position, therefore it will be anchored to (0,0) of its parent, any other elements are then drawn to the default (0,0) coords of there parent (body in this case).

In order to fix this, make the .container elements position relative, the text div will now have its position drawn at (0,100) as container has a height of 100px relative to the body.

This also makes sense for the case that you want your .image to overlap in .container, both .image divs have their position set to absolute meaning they will be drawn at (0,0) within their parent (.container in this case).

Updated css would look like this:

.container {
    position: relative;
    width: 100px;
    height: 100px;
}
.image {
    position: absolute;
    width: inherit;
    height: inherit;
    border: 1px solid red;
}

Please note that the parent div now contains information of the width and height, the children images now inherit this information from the parent, however you could make them smaller. Hope this helps :)

JSFiddle Solution

Upvotes: 1

Joe Hakooz
Joe Hakooz

Reputation: 573

Fixed version in jsfiddle
http://jsfiddle.net/uS7nw/270/

Just a few tweaks needed. Specifically using 

position:relative

on .container and .imageOne

and

top:0

on .image

Upvotes: 1

Related Questions