Why do images with absolute positioning and 0 top offset stack vertically?

Question

In this example page from MDN's CSS clip documentation, the 3 clipped images stack vertically. Why is that?

In the source code, they all have position: absolute; top: 0;, with 360px, 280px and 200px for their left property respectively.

MDN explains absolute positioning as:

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)

and

an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).

So, shouldn't the 3 clipped images all stay closely under the top of <p> (since they all have top: 0;), and at the right of <p>'s left edge with 360px, 280px and 200px distances respectively?

I must have misunderstood something about position: absolute;. What is that?

Does this answer your question? [Why do absolute elements stack up on each other instead of stacking one after the other?](https://stackoverflow.com/questions/20718577/why-do-absolute-elements-stack-up-on-each-other-instead-of-stacking-one-after-th) — Kameron, Jan 12 '22 at 16:22
@カメロン No, the thread discusses why elements overlap each other, which I understand is the normal result of `position:absolute;`. My question is why elements in the page I showed stack with each other vertically, which seems to be the other way round. — Jyunhao Shih, Jan 13 '22 at 02:43

jeremy-denis · Accepted Answer · 2022-01-13T06:07:18.420

images all have the clip css property

The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. https://developer.mozilla.org/en-US/docs/Web/CSS/clip

clip is a property that take an images and display only the part between given coordinate

.dotted-border {
        border: dotted;
        position: relative;
        width: 536px;
        height: 350px;
      }
      
      #top-left, #middle, #bottom-right {
        position: absolute;
        top: 0;
        left:280px;
    }


.dotted-border img {
   position:absolute;
  clip: rect(119px, 255px, 229px, 80px);
}

    <p class="dotted-border">
      <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
    </p>

images not stack vertically but in the given sample it has the correct clip values to display the part of image located at coordinate and display it as it is stacked

if you remove or change clip on images you will see that all of them stack on each other at position top:0

it's the normal behavior of clip property

withour clip images stack on each other as position absolute work

 .dotted-border {
    border: dotted;
    position: relative;
    width: 536px;
    height: 350px;
  }
  
  #top-left, #middle, #bottom-right {
    position: absolute;
    top: 0;
    left:280px;
}

<p class="dotted-border">
  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>

clip property take this parameter

clip: rect(top offset, visible width, visible height, left offset)

if you want to position a clip element the calculation will be for sample for vertical position

top: calc(wantedPosition - visibleHeight/ 2);
bottom: calc(wantedPosition - visibleHeight/ 2);
left: calc(wantedPosition - visibleWidth/ 2);
right: calc(wantedPosition - visibleWidth/ 2);

If you want to position a clip element you can

.dotted-border {
        border: dotted;
        position: relative;
        width: 536px;
        height: 350px;
      }
      
      #top-left, #middle, #bottom-right {
        position: absolute;
        top: 0;
        left:280px;
    }


.dotted-border img {
   position:absolute;
  clip: rect(119px, 255px, 229px, 80px);
  bottom:calc(0px - 114px);
}

    <p class="dotted-border">
      <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
    </p>

After trying I think I got it more or less. Images are positioned THEN clipped, so the remaining visible rectangles appear to stack upon each other vertically. — Jyunhao Shih, Jan 13 '22 at 03:11
This raises another question: how can I achieve the effect of clipping and then positioning, i.e. the ***visible area*** , not the edge of the original unclipped element, positioned at the specified offsets? — Jyunhao Shih, Jan 13 '22 at 03:28
you have to use top bottom left ... the calculation will be top: calc(theTopPositionNeeded - visibleHeight/ 2); — jeremy-denis, Jan 13 '22 at 05:50
for place element at the top of the div you will have to do top: calc(0px - 114px); — jeremy-denis, Jan 13 '22 at 05:51

Why do images with absolute positioning and 0 top offset stack vertically?

1 Answers1