CSS - Position Absolute & Document Flow

CSS - position absolute & document flow

The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.

PS: position:block doesn't exist. Only absolute, relative, static, and fixed.

CSS - Resuming normal document flow after absolute positioning an element

Once an absolutely positioned element is out of the document flow, there is no way of putting it back in.

Your suggestion to add in a hidden element is viable, but you can also set the margin-top of your second div to equal the height of the absolutely positioned element - which would place it below the first div.

Absolute element overflowing the document

The issue here is about overflow not document flow. If we refer to the specification:

Generally, the content of a block box is confined to the content edges
of the box. In certain cases, a box may overflow, meaning its content
lies partly or entirely outside of the box, e.g.:

...

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block

....

You may notice that there is no positioned element other than child so the containing block of the child will be the viewport. And the trick here is that the scroll bar is always added to the containing block starting from the left (horizontal scroll) or the top (vertical scroll) so any overflow from the top or the left will becomes inaccessible.

Here is an illustration to better see the issue:

.parent {  width: 100%;  height: 100vh;  border: 1px solid red;  background-color: magenta;  box-sizing:border-box;}
.child {  position: absolute;  width: 100px;  height: 50%;  border: 1px solid black;  left: 0;  background-color: yellow;  animation:move 3s infinite linear alternate;}@keyframes move{  from {left:-100px}  to {left:100%}}
body { margin:0;}

<div class="parent">  <div class="child"></div></div>

Document flow & CSS styling: Hiding elements properly

When you apply the CSS style visibility: hidden, the element you have hidden is still part of the document flow. Though you cannot see the element, it takes up space in the layout and affects where sibling elements appear in the layout.

If you want to hide an element and not have that element continue to take up space and affect where other elements appear, use display: none

Elements with absolute position are taken out of the document flow. Their position is relative to the viewport. For example, an absolutely positioned element with top: 10px; left: 10px; would appear in the upper left hand corner of the viewport, 10 pixels from the top and 10 pixels from the left. If however, the parent container has position: relative, the absolute position of the child will be relative to its parent. Thus, the child would be 10 pixels from the top and 10 pixels from the left of its parent. not the viewport.

I hope this helps.

---

Related Topics