Question

我对css中的绝对位置和相对位置感到困惑。请参考下面的元素

<div id="container" style="position:"relative">
..........................................

<button style="position:"absolute"; left:10px;" >

</div>

当我将位置设置为绝对值并将其设置为10 px时，按钮意味着它不从浏览器窗口获取位置，而是从父div（容器）获取位置，因为容器位置是相对的。为什么？

当我将位置绝对设置为任何元素时，它仅从浏览器窗口获取位置。为什么它检查父元素然后定位。

当我设置相对于任何元素的位置意味着它将基于父元素定位的时间。

p>Paragraph 1.</p>
 <p>Paragraph 2.</p>
 <p style="position: relative;left: 2em;">Paragraph 3.</p>

在上面的例子中，第三段将位于容器元素左侧的3em处。

我研究了以下链接。

绝对 - ＆gt;从浏览器窗口获取位置

亲戚 - ＆gt;从元素的父元素获取位置

任何错误的理解？

谢谢，

希瓦

Answer 1

绝对位置元素相对于其位置不是静态的第一个父元素定位。如果找不到这样的元素，则包含的块是html元素。

Answer 2

<强>绝对

相对于relative或absolute的第一个父元素定位（默认为html /浏览器窗口） - 意味着拥有relative父元素会导致所有子元素相对定位使用absolute

时使用该元素

<强>相对

相对于原始静态位置（不涉及父级）定位 - 可用于从元素的当前位置稍微移动元素而不影响元素的布局

<强>固定

根据您的使用要求，另一个选项是position:fixed，它使项目相对于浏览器窗口保持定位，无论父样式如何（对于模态窗口很有用，因为元素保持原样，即使在滚动时）

额外阅读： http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/