css - Make a relative-positioned block element the same size as its contained absolute-positioned element -

OK, I am trying to take several divs and all of their contents, and pile them over each other In which the default method is seen in the normal flow of things (# stack) through the following method:

CSS:

  #stack {position: relative; Display area; } #stack div {status: absolute; Left: 0; }  

HTML:

  & lt; Div id = "stack" & gt; & Lt; Div & gt; & Lt; Img src = "picture / 1.jpg" & gt; & Lt; P & gt; The first image & lt; / P & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 2.jpg" & gt; & Lt; P & gt; The second image & lt; / P & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 3.jpg" & gt; & Lt; P & gt; Third image & lt; / P & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 4.jpg" & gt; & Lt; P & gt; The fourth image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

In addition to div # stack, which works, the width / height of 0 is. I would like to consider it the same size as my eldest child.

thanks for the help advance!

As you are taking the internal device from the flow of the document position: absolute; , the external div can not spread to the dimensions of the largest child in any case. You have to use Javascript to get that effect if you are familiar with jQuery, then you can use something like this:

  var w = false, h = false ; $ ('# Stack div') Each (function () {w = $ (this). Width ()> gt; w ||! W? $ (This) .width (): w; h = $ (this) .ht ()> h ||! H? $ (This) .ht (): h;}); $ ('# Stack'). CSS ({width: w, height: h});