CSS和HTML定位的解释答案

【问题标题】：Explanation of CSS AND HTML positioningCSS和HTML定位的解释
【发布时间】：2018-06-02 01:49:15
【问题描述】：

我有以下代码：

.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 学校复制的。运行此代码时，IMAGE 的左上角出现文本“左上角”。

我需要了解原因。

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

但是具有 Topleft 类的 Div 不在 IMG 中。它在容器类的 div 内。

为什么 TOP LEFT 文本位于图像内部而不是容器 Div。 img 不是 TopLeft Div 的最近定位祖先。

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

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

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

【问题讨论】：

左上角不在图像的左上角。它在容器的左上角
image 和 topLeft 元素都是容器 div 的子元素。 topLeft div 只是使用绝对定位来坐在图像上方。
啊！这就是诀窍。所以这样我们就不需要 z-index:-1 并获得重叠？
很好的答案。谢谢大家！

标签： html css

【解决方案1】：

每当一个元素被绝对定位时，它都会将自己从页面流中提升出来。给定元素的任何定位属性将始终相对于它的父元素，包含元素。

在这种情况下，父元素是容器 div。这个容器没有定位属性，所以会定位在网页的左上角。

左上角的 div 被放置在距离容器 div 的顶部 8px 和对面 16px 的位置。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

}

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

【讨论】：