Geek Answers Handbook

Overlay one div over another, but not knowing the size of the div

I am trying to lay one div over another. It is really simple if you know the dimensions of the div.

Solved here: How to overlay one div on another div

So here is my HTML:

<div class="container"> <div class="overlay"></div> <div class="content"></div> </div>

In my case, I do not know the exact dimensions of the "content" or "container". This is due to the fact that I do not have control over the content in the div (we make our application extensible for third-party developers).

Take a look at my jsFiddle example. The overlay should fully cover the content. 100% width and 100% height. However, this does not work, because in my example I completely positioned the overlay.

One solution is to use JavaScript to get the size of the contents of the div, and then set the size of the overlay. I do not like this solution, because if the sizes of the images are not specified, you need to wait until the images are loaded, and recount the size of the div.

Is there a way to solve this problem in CSS?

+4
source share
7 answers

This cannot be done because:

  • The overlay does not contain anything to limit its size (since there is no height / width for the container).
  • The size of the content of a div may change as the content loads (since it does not have a fixed width / height).

I solved this with JavaScript *. For instance.

 function resizeOverlay() { $('.overlay').css({ width: $('.content').width() height: $('.content').height() }); } $('.content').find('img').on('load', resizeOverlay);

* Code not verified.

+1
source

You can set the absolute position, and then set all 4 positioning values ​​to 0px , which will make the window more expanded. See the demo here: http://jsfiddle.net/6g6dy/

This way you don’t have to worry about recounting things if you want to fill in the overlay or container (for example, if you used the actual values ​​of height and width ), because it will always be set to the external dimensions of the box.

+2
source

See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/

Are you trying to do as the demo mentioned above?

CSS

 #container { position: relative; } .overlay, .content{ display:block; position: absolute; top: 0; left: 0; } .overlay{ z-index: 10; background: #ccc; }
0
source

Hey you look like this: http://tinkerbin.com/Vc4RkGgQ

CSS

 .container { position:relative; background:blue; color:white; } .content { position:absolute; top:0; left:15px; background:red; color:yellow; }
0
source

I don’t know what you are trying to do, but this might work:

container should be relative : nothing static

overlay and content are absolute : move up / left in the first non-statistical parent; no flow.
Give the same top/left to be on top and above the z-index for the top element.

0
source

You can really do this without JavaScript. Your problem is that the #container element is 100% wide relative to the entire page. To fix this, you can:

a) install it absolutely,

 #container { position: absolute; }

b) make it floating or

 #container { float: left; }

c) make it appear as a table cell

 #container { display: table-cell; }

Enough of one of the above, you do not need to apply everything. Also you should not position .content absolutely, as this will prevent #container from having the same width / height.

0
source

If you are worried about loading images after setting the height, you can go and set the image size in the containing div and use padding- the bottom hack . Thus, when browsers view a page, he knows how large the image will be before it loads.

0
source

More articles:


All Articles