絕對位置元素在靜態父級內的行為究竟如何
[英]How exactly does absolute position element behaves inside a static parent
問題描述
我問這個問題，因為昨天我必須設置幾個div，因為它在這個 JSFiddle示例中顯示。
對我來說棘手的部分是從<div id="vertical-menu">直接定位<div id="content-container"> <div id="vertical-menu">但是保持它們頂部對齊。 此外，我希望<div id="content-container">的邊界超出它的父div。 經過一些研究（我是CSS初學者），我發現絕對定位可能是我所有問題的答案。 所以，你可能會看到我添加了position: absolute到我的<div id="content-container">以及其他樣式我得到了我想要的東西。
然而，從我讀到的關於absolute定位的內容，我留下的印象是我需要一個具有relative位置的父級，如果沒有找到，我最終會以<html>作為我的父元素，這對我來說意味着元素與absolute定位將位於頁面的最左上角。 但正如示例所示，即使我的父元素，也沒有任何其他元素具有relative positioning我仍然在流中獲取我的元素。
那真的發生了什么？ 為什么在這種情況下我的absolute定位元素不會超出正常流量？ 我認為，說它與static定位元素進行交互是正確的，所以在static元素和relative父元素中的absolute定位元素之間是否存在任何類似的行為。 而且 - 它可能會有一些意想不到的行為 - 我問這個因為我在我的真實世界場景中使用它並且我對結果感到滿意，即使我的父母使用默認的static定位但是我想知道這是否只是幸運巧合或只是絕對元素在static或relative父母內部時表現相似？
2 個解決方案
解決方案1
8 已采納 2013-11-17 17:50:46
您沒有為絕對定位的元素指定top ， bottom ， left或right任何一個，因此它保持靜態位置並且不會移動到任何位置。
無論您的元素是否位於另一個定位元素中，都會發生這種情況，並且完全是設計上的; 請參閱我對這個問題的回答，以獲得CSS2.1規范的解釋。
我在你的小提琴里看到你試圖漂浮你絕對定位的元素; 那不管用。 絕對定位元素后， 它就不能浮動 ：
影響框生成和布局的三個屬性 - 'display'，'position'和'float' - 交互如下：
如果'display'的值為'none'，則'position'和'float'不適用。 在這種情況下，元素不生成框。
否則，如果'position'的值為'absolute'或'fixed'，則該框絕對定位，'float'的計算值為'none' ，並根據下表設置顯示。 框的位置將由“頂部”，“右側”，“底部”和“左側”屬性以及框的包含塊確定。
刪除position: absolute單獨的position: absolute聲明將導致你的元素重新定位，因為它現在是浮動的（實際上它被#vertical-menu按下，因為沒有足夠的空間），並且一旦刪除了float: left聲明， 它將返回通常的靜態位置 。
另請注意，當您絕對定位元素時，它仍然會從正常流程中取出。 如果您嘗試在<div id="content-container">...</div>之后直接添加內容，您會看到額外的內容出現在同一位置而不是被按下 。
解決方案2
2 2013-11-17 17:53:42
CSS position
-
position: static是默認值，並根據display屬性將元素按順序依次放置。 手動將元素設置為靜態幾乎沒有實際意義。 -
position: relative與static非常相似，但是相對父級內的元素相對於第一個非靜態父級具有top，left，bottom和right值。 當您通過JavaScript獲取元素的偏移位置或使用CSS或JavaScript設置它時，可以看到這一點。 -
position: absolute使元素相對於<html>或第一個相對或絕對定位的父元素放置。 這意味着它的位置應該設置為top, left, bottom, rightCSS屬性，這些屬性從第一個相對或絕對祖先元素開始計算。
你的錯誤是沒有為<div>設置top或left CSS屬性。 希望這個小小的解釋能點亮你！ 祝你好運。
position絕對內部位置相對於給定父元素的范圍
[英]position absolute inside position relative gives element scope in parent
如何使用[position：relative]在父元素內使用[position：absolute]更改子元素的大小？
[英]How to change the size of child elements with [position:absolute] inside a parent element with [position:relative]?
當相對父代沒有高度和寬度時，如何將絕對子代放置在相對父代內部？
[英]How to position absolute children inside relative parent, when relative parent does not have height and width?
如何使用水平滾動設置在容器內部具有絕對位置的父元素的li元素定位
[英]How to set li element positioning that has a parent with absolute position inside a container using horizontal scrolling
中心位置絕對元素，內部位置絕對父元素，最大寬度
[英]Center position absolute element inside position absolute parent with max-width
為什么'position：absolute'元素不能相對於'position：static'的父元素定位？
[英]Why can't a 'position: absolute' element be positioned in relation to a parent that is 'position: static'?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.