絕對位置和相對位置

我對位置絕對和相對於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

絕對位置和相對位置

回答

相關問題