关于绝对定位元素宽度的问题

Question

我是 CSS 的新人。我不明白是否显示：绝对；元素例如 a ，是否仍然被认为是其父元素的子元素（因为它不在流中）？

例如：

**HTML**

<div class="container">
   <div class="my_div">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       In sit amet nibh et arcu gravida tincidunt. Nam dignissim elit
       vitae erat porta, at efficitur lacus consequat. Sed molestie,
       mi a efficitur elementum, lacus metus hendrerit libero, posuere
       ultricies urna libero nec quam. 
   </div>
</div>


**CSS**

.container div {
   width: 50%;
}

.my_div {
   position: absolute;
}

没有位置：绝对； my_div 宽度等于容器的 50% 宽度。但是在设置position: absolute之后；我不明白 my_div 宽度到底发生了什么，是否仍然指的是 CSS .container div{} 规则？

Answer 1

依旧是parent的child，但也是流外的。给父级 position: relative; 将允许子级的某些属性（如 top 等）仍然相对于父级起作用。通常绝对定位的元素需要明确的 height 和 width 声明，但这取决于您要做什么...

Answer 2

parent-child 关系 并没有真正改变（所以从技术上讲，它仍然是 child，你可以看到反映在 DOM) 中，但 "（文档）流程" 确实发生了变化。

一旦您使用 position: absolute; 元素就会从正常的文档流中删除，这确实会影响许多属性的效果（正如您可能已经注意到的那样）。

既然你提到了 CSS 的新手，我应该确保你知道 90% 有时，当在线教程（或书籍）建议使用 position 和 float 等属性时，它们很可能会引导您走上过时的 and/or 误导之路。

现在我们有 flexbox (display: flex) 和 grid (display: grid) 之类的东西，它们完全解决了绝大多数布局挑战（这曾经是 understand/create 的痛苦）简单。

关于绝对定位元素宽度的问题

question about width of an absolute positioned element

html

css

css-position

absolute

width