Menu
In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window. the sample code is shown below..
CSS
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
}
.child {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
329
I´ve noticed that when positioning a child position:absolute; and its parent is display: flex what happens is that the child is like the only element in the parent. It goes out-of-flow, it does not "interact" with the other flex-childs. When positioned absolute, the flex values given to the parent AFFECT this child, on his own.
Here parent class has no position so element is placed according to body. In this example parent has relative position hence element are positioned absolute inside relative parent. Show activity on this post. In a use case of needing a sticky floating "back button"/ "back to top" button.
When positioned absolute, the flex values given to the parent AFFECT this child, on his own. Anyone has more info about this? If you do position: absolute; on a flex-child element, it will still have flex-alignment until you give it left, right, top, bottom.
If we don’t specify the position of the parent element, the child <div> will be positioned relative to the page. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) In the example above, the child <div> element is positioned at the bottom right of its parent.
If you want the arrange the child with in the parent block just add position:relative in the parent CSS
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
