html - 绝对位置内的绝对定位

Question

我有 3 个 div 元素。

第一个 div 更大(换行)并且有 position:relative;

第二个div相对于第一个div相对定位(并包含在第一个div中)

第三个div包含在第二个div中，也有绝对定位。

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

为什么第 3 个 div 位置相对于第 2 个 div 是绝对位置(这也是第一个 div 的绝对位置)而不是第一个div 有相对位置 ?

因为第 3 个 div 是相对于绝对定位的第 2 个 div 的绝对定位。

Answer 1

因为 position: absolute 会像 position: relative 一样重置子项的相对位置。

没有办法解决这个问题 - 如果您希望第三个 div 相对于第一个绝对定位，您必须将它设为第一个的子级。