Make absolute positioned div expand parent div height
You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.
You either use fixed heights or you need to involve JS.
How to set parent div's height as child div with position: absolute
I don't think this is possible with CSS while keeping the children absolutely positioned.
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute
, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
var content=document.querySelector('.content');var container=document.querySelector('.container');
content.style.height=container.offsetHeight + 'px';
*{box-sizing:border-box;}
.content { width: 100%; max-width: 1160px; margin: 0 auto; /*padding: 120px 0;*//*Padding removed for example*/ border:5px solid green;}.container{ position: absolute; overflow: hidden; width: 100%; border:2px solid red; height:652px;}
<div class="content"> <div class="container"> some other elements whose height is 652px... </div></div>
Make parent div height according to children absolute div
Use display:grid
and make both elements on the same area and you will have the overlapping effect without position:absolute
.main {
position: absolute;
z-index: 500;
left: 56px;
display: block;
}
.parent {
position: relative;
margin: 10px;
display:grid; /* here */
align-items:start; /* disable stretch alignment */
}
.parent>* {
grid-area:1/1; /* here */
}
.parent>*:nth-of-type(1) {
z-index: 10;
}
.parent>*:nth-of-type(2) {
margin-top:1.4rem; /* you can now use margin instead of translate */
transform: scale(.95);
z-index: 9;
}
<div class="main">
<div id="parent1" class="parent">
<div class="child" style="background-color:blue;"><br>Child1</div>
<div class="child" style="background-color:red;"><br><br><br>Child2</div>
</div>
<div id="parent2" class="parent">
<div class="child" style="background-color:green;"><br>Child1</div>
<div class="child" style="background-color:yellow;"><br>Child2</div>
</div>
</div>
Position: absolute and parent height?
2022 UPDATE. This answer is nearly 10 years old. When it was written we didn't have layout technologies like Flex or Grid available (they were dark, hacky/fun times).
Thankfully things have massively improved. Jöcker's answer shows you how to achieve this layout with Grid. If you can live with not supporting legacy browsers, do that instead!
Original Answer
If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute
, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left
/float:right
and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden
on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
article {
position: relative;
overflow: hidden;
}
.one {
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
background: red;
width: 30px;
height: 30px;
}
.two {
position: relative;
float: right;
margin-top: 10px;
margin-right: 10px;
background: blue;
width: 30px;
height: 30px;
}
Related Topics
Transparent Half Circle Cut Out of a Div
Css Display an Image Resized and Cropped
Render a String in HTML and Preserve Spaces and Linebreaks
How to Position One Image on Top of Another in Html
How to Add an HTML Link in the Body of a Mailto Link
Ie8 Support For CSS Media Query
Can You Target ≪Br /≫ With Css
How to Draw Vertical Text With CSS Cross-Browser
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser
Is Either Get or Post More Secure Than the Other
How to Create a Div With a Curved Bottom
Put Icon Inside Input Element in a Form
What Is the Correct Value For the Disabled Attribute
How to Center a Button Within a Div
Why Does the HTML Input With Type "Number" Allow the Letter 'E' to Be Entered in the Field