为什么绝对定位和0顶部偏移的图像垂直堆叠？

Question

在this example page from MDN's CSS clip documentation中，3张裁剪图像垂直堆叠。这是为什么？

在源代码中，它们都有position: absolute; top: 0;，它们的left属性分别为360px、280px和200px。

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.)

和

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).

所以，3张剪裁的图片不应该都紧贴<p>的顶部（因为它们都有top: 0;），并且在<p>的右侧左边缘距离分别为 360px、280px 和 200px？

我一定是对position: absolute;有什么误解。那是什么？

Answer 1

图片都有 clip css 属性

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 是一个属性拍摄图像并仅显示给定坐标

之间的部分

.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>

图像不是垂直堆叠，但在给定的示例中它具有正确的裁剪值以显示位于坐标处的图像部分并在堆叠时显示它

如果您删除或更改图片上的剪辑，您会看到所有图片都在 top:0

位置相互堆叠

这是剪辑的正常行为属性

我们的剪辑图像作为位置绝对工作相互堆叠

 .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: rect(top offset, visible width, visible height, left offset)

如果你想定位剪辑元素，计算将用于垂直位置的示例

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

如果你想定位一个剪辑元素，你可以

.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>

为什么绝对定位和0顶部偏移的图像垂直堆叠？

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

html

css

absolute