1

我对 CSS 中的绝对位置和相对位置感到困惑。

<div id="container" style="position:"relative">
  <button style="position:"absolute"; left:10px;" >
</div>

在上面的示例中，当我将位置设置为绝对位置并将左侧设置为 10px 到按钮时，意味着它不会从浏览器窗口中获取位置。取而代之的是，它从父 div（容器）中获取位置，因为容器位置是相对的。为什么？

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

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

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

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

我研究了以下链接。

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

http://www.barelyfitz.com/screencast/html-training/css/positioning/

absolute→ 从浏览器窗口获取位置

relative→ 从元素的父元素获取位置

4

2 回答 2

1

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

于 2013-10-15T11:09:56.877 回答
1

绝对

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

相对的

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

固定的

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

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

于 2013-10-15T11:13:13.753 回答