绝对位置和相对位置

我对位置绝对和相对于CSS的位置感到困惑。请参阅以下元件绝对位置和相对位置

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

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

</div>

当我设置位置作为绝对，放置10像素到按钮意味着它不取位置从浏览器窗口中，而不是此它需要位置从父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/

绝对 - >需要位置与浏览器窗口

相对 - >需要从位置的元素

任何的父母我错误地理解？

谢谢，

希瓦

来源

2013-06-19 SivaRajini

你是对的。如果将绝对定位的元素放置在相对定位的元素内，则内部元素定位基于父元素。不完全确定*为什么这是事实，但这是它的工作原理。另外请记住，绝对定位会将流程中的对象排除在外;本质上，相对父母只是帮助建立0,0坐标。 – trnelson

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

来源

2013-10-15 11:09:56

绝对

位于相即relative或absolute（默认为HTML /浏览器窗口）的第一个父元件 - 这意味着具有relative父，导致所有子元素被相对定位成该元素时使用absolute

相对

位于相对于它的原始的静态位置（父母不参与） - 可用于从它的当前位置，不影响元素的布局

固定

根据您的使用需求稍微移动元素，另一种选择是position:fixed其保持相对于浏览器窗口项定位，考虑父造型（用于模态窗口有用的，因为元件保持它是，即使滚动时）

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

来源

2013-10-15 11:13:13 SmokeyPHP

绝对位置和相对位置

回答

相关问题