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

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?

CodePudding user response：

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 >
      <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 >
  <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 >
      <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
    </p>