Question

我有以下代码：

.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

这是从w3学校复制的。运行此代码时，文本“左上角”出现在图像的左上角。

我需要了解原因。

在这种情况下，带有容器类的div用相对位置定义。

但是与Topleft类不同的Div不在IMG内部。它位于带有容器类的div内。

TOP LEFT文本如何定位在图像内部，而不是容器Div。 img不是TopLeft Div最近的祖先。

======================================

感谢您的评论。我认为这种行为的核心原因是以下事实：

绝对定位元素将从正常流中移除，并且可以重叠元素。

Answer 1

每当元素绝对定位时，它将自己从页面流中抬起。给定元素的任何定位属性将始终相对于包含元素的父元素。

在这种情况下，父元素是容器div。此容器没有定位属性，因此将位于网页的左上角。

然后将topleft div从顶部放置8px，从容器div的同一角落放置16px。

图片没有定位，但恰好显示在父容器的左上角，位于定位文本下方。

通过向容器div添加边距值，您可以看到绝对定位的元素始终相对于其父元素。例如，如果应用50px的边距，则容器将从页面左上角向左和向下50个像素插入。图像和文本将相应移动。

Answer 2

您的图片代码是内联的，意味着它不会被DIV块本身包围，因此图像是正常渲染的一部分，而div中的文本正好位于左上角位置：绝对。如果在两行周围放置单独的div块，则可以指定定位是绝对还是浮动等。

Answer 3

我通过添加背景和填充进行了一些修改。 .topleft实际上是基于它的位置，包含父母在图像上的显示，因为图像已经整个容器。

＆＃13;

.container {
    position: relative;
    background: tomato;
    height: 500px;
    padding: 30px;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
     background: red;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
    background: black;

}

＆＃13;

<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>

＆＃13;

CSS和HTML定位的说明

3 个答案: