how to add 2 overlapping elements in a div? - css

Question

<div id="parent" style="height:250px;width:250px;display:inline">
<div id="child" style="height:100%;width:100%;z-index:10001"></div>
<select style="height:100%;width:100%;z-index:10000"><option/></select>
</div>
My requirement is to include the select and child div elements inside the parent div in such a way that the child div is on top of the select element and completely covers it. Later I want to hide the child div based on an event and make the select element visible.
Both child div and select elements should occupy the entire size of parent div each on their own.
how can I achieve this?

Answer 1

http://jsfiddle.net/dyBjZ/2
#parent {
position: relative;
overflow: auto;
}
.child {
position: absolute;
height:100%;
width:100%;
}
<div id="parent">
<div class="child">
<select>
<option>One</option>
<option>Two</option>
</select>
</div>
<div class="child" id="child">Click me</div>
</div>

Answer 2

Taking input from the comments above, I was able to solve my problem. Here is what I did. Posting it here in case someone else lands up on this page searching.
<div id="parent" style="height:250px;width:250px">
<div id="child" style="display:block;height:100%;width:100%"></div>
<div id="selectParent" style="display:none;height:100%;width:100%">
<select><option/></select>
<div>
</div>
Based on the javascript event, I toggle display from block to none for child div. And toggle display from none to block in selectParent.

Answer 3

First issue is to give the #parent div a size, thus remove display: inline from its style.
Next, you could toggle for both elements from display: none to display: block, and v.v. But to reduce this by half, you could use absolute positioning which takes the element out of the default markup layout, as shown in this example.
HTML:
<div id="parent">
<div id="child"></div>
<select></select>
</div>
CSS:
#parent {
height: 250px;
width: 250px;
position: relative;
}
#child {
position: absolute;
background: #aaa;
height: 100%;
width: 100%;
}
select {
height: 100%;
width: 100%;
}
#child.hidden {
display: none;
}