html - 为什么CSS位置绝对值相对于其子绝对值元素表现得像

This question already has answers here:

How to make div's percentage width relative to parent div and not viewport

                                    （2个答案）


                                2年前关闭。


我有一个与此类似的结构：

<div style="border: 1px solid red; position: relative; height: 200px">
        <div style="border: 1px solid green; position: absolute; left: 10px; top: 10px;height: 100px; width: 200px ">
            <div style="border: 1px solid blue; position: absolute; top: 15px; 10px; height: 20px; width: 20px;">

            </div>
        </div>
    </div>

在此示例中，第3个div以第2个div为相对。我一直以为您的位置最接近relative元素，而不是最接近的absolute元素。
为什么会这样呢？我是否错过了最近的更改？

最佳答案

从MDN：

  绝对
  不要为元素留出空间。而是将其放置在
  相对于其最接近的祖先的指定位置，
  或相对于初始包含块的其他方式。绝对
  定位的框可以有边距，并且不会与任何框一起折叠
  其他利润。

从W3C：

  在绝对定位模型中，框相对于其包含的块显式偏移。

这进一步导致

Definition of containing block

  如果元素具有position: absolute，则包含块为
  由最接近的祖先建立的位置不是静态的。

因此，您的绝对元素将始终与祖先位置相关，除非它是静态定位的元素。

关于html - 为什么CSS位置绝对值相对于其子绝对值元素表现得像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42353761/

上一篇：javascript - 选择元素后制作订单列表

下一篇：jquery - 无法覆盖 jquery 中的上一个点击功能

相关文章：

html - 防止与绝对定位元素重叠

html - Visual Studio 2010 html 缩进

android - 如何在 Android 中发送带有 Html 内容和图像的电子邮件

html - 如何为 html 页面的两半着色

html - 无序列表，里面有无序列表。彼此缠绕

html - 图像不保持纵横比。无法使用背景图像 : cover

javascript - 如何在iframe src中使用javascript变量

html - 创建一种在元素组中滑动的方法

html - 将元素定位到精确的 div

css - 一个 div 中的三个绝对定位的 div 行为异常