模擬正常流量絕對定位div

我需要#blue div的頂部與#red標頭的底部保持固定距離（例如2em）。換句話說，當#red標題的垂直尺寸增加時（即由於視口縮小導致菜單項包裹），#blue div應該被「推下」。

我寧願一個純CSS的解決方案，但如果任何人都可以證實我的感覺，這不能通過CSS完成，那麼我也需要和欣賞關於哪個jQuery函數我應該掛鉤的建議，以及哪些DOM事件。

注：

佈局否則作品作爲-是，除了目前#blue DIV是（有效地）垂直地從灰#page div的頂部定位在由一個固定的距離。這意味着，由於#red標題變得更高，因此#red將「落後」到div而不是「推」下來。
HTML被限制，除了#green和#blue div的順序可以顛倒（在#main格內）。
#blue相對於#page由#red頭以下邏輯流的，因爲我的要求來定位其#green兄弟定位，並且沒有，：#green必須的頂部保持與頂部定位在由固定的量#page。

我已經通過使#green 相對於白鑲上#main DIV在其中其水平位置實現定位實現這一點（正確或錯誤），以及#main依次定位內#page絕對實現固定垂直位置。

這當然會對#blue的位置產生影響。我只是不是確定是否有辦法「突破」這個部分遠離其他，使它回到更「正常」的流程。

我並不受限於這種方法來#green的定位相對#page，只是，只要最後的結果爲#green 是相同的，#blue向下移動作爲#red包裝的結果，這樣做獨立於#green。

您的時間非常感謝！

HTML：

<body> 
<div id="page">page 
    <header id="red"> 
     <div id="menu-container"> 
      <ul id="nav-menu"> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
       <li class="menu-item">menu</li> 
      </ul> 
     </div> 
    </header> 
    <div id="main"> 
     <div id="blue"></div> 
     <div id="green"></div> 
    </div> 
</div>

CSS：

body { 
    /*arbitrary*/ 
    background-color: black; 
    padding: 0 1em 
} 
#page { 
    /*arbitrary*/ 
    background-color: gray; 
    border-color:gray; 
    border-width:1pt; 
    border-style:dotted; 
    /* necessary - or at least, the achieved result is */ 
    max-width: 1000px; 
    min-width: 240px; 
    margin: 0 auto; 
    /* both blue and green positioned relatively to this div */ 
    position:relative; 
} 
header { 
    /*arbitrary*/ 
    background-color: red; 
    /* necessary - or at least, the achieved result is */ 
    width: 100%; 
} 
/* necessary - or at least, the achieved result is */ 
#menu-container { 
    width: 50%; 
} 
ul { 
    list-style: none; 
} 
.menu-item { 
    margin: 0 0.25em 0 0.25em; 
    display: inline-block; 
} 
#main { 
    /*arbitrary*/ 
    border-color:white; 
    border-width:1pt; 
    border-style:dotted; 
    /* necessary - or at least, the achieved result is */ 
    position:absolute; 
    top: .5em; 
    width: 100%; 
} 
#green { 
    /*arbitrary*/ 
    background-color: green; 
    height: 15em; 
    /* necessary - or at least, the achieved result is */ 
    z-index: 100; 
    width: 40%; 
    position: relative; 
    left: 50%; 
} 
#blue { 
    /*arbitrary*/ 
    background-color: blue; 
    height:3em; 
    /* necessary - or at least, the achieved result is */ 
    width:100%; 
    /**** here's the problem - top of blue currently 5em below top of grey page. 
    But I want it 2em below bottom of red header nomatter how tall red header is ****/ 
    position: absolute; 
    top:5em; 
}

來源

2013-03-09 Sepster

總是給相關的代碼和標記**的問題本身**，不只是鏈接（甚至沒有的jsfiddle，雖然這是一個不錯的輔助* *）。爲什麼：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-forputing-code-in-the-question – 2013-03-09 16:55:51

@TJCrowder完成，謝謝你的諮詢。 – Sepster 2013-03-09 17:04:06

爲什麼不簡單地忘記相對定位，並從頁面頂部絕對定位？

#page { 
    ... 
    position:relative; 
} 

#green { 
    ... 
    position: absolute; 
    left: 50%; 
    top:0.5em; 
}

來源

2013-03-09 17:19:33

爲了澄清，你說我應該從'＃main'，'＃blue'和'＃green'移除相對位置，在＃頁面上留下相對位置，並在'＃green'上應用絕對定位？對。這樣可行。無法看到樹木的森林。謝謝你的幫助！ – Sepster 2013-03-09 17:40:18

不客氣:) – 2013-03-09 17:41:07

我更新了你的建議編輯的答案。 – 2013-03-09 18:11:17

http://jsfiddle.net/xNUKb/8/

取出position: absolute下：#main和#blue

來源

2013-03-09 17:18:23 abbood

參考_＃格林的頂部必須保持從#page_ – Sepster 2013-03-09 17:24:27

的頂部固定的量定位..雖然我有一個建議..你似乎有很多相交的條件..它使閱讀你的問題相當困難..我的建議是嵌入你的條件在HTML本身..即如果我加載jsfiddle的HTML頁面..我可以看到在綠色框內的綠色框本身的要求..這樣它變得更可讀.. – abbood 2013-03-09 17:31:50

條件_are_概述，但在CSS中;-)感謝您的時間，但我真的很感激幫助。好建議。 – Sepster 2013-03-09 17:46:12

絕對定位可能會導致您頭痛。但這個想法很簡單。

http://jsfiddle.net/vuwzN/

<div id="red"></div> 
<div id="blue"></div> 

#red { 
    height: 150px; /* variable height*/ 
    margin-bottom: 50px; /* fixed distance between red and blue */ 
    background-color: red; 
} 

#blue { 
    height: 100px; 
    background-color: blue; 
}

來源

2013-03-09 17:22:51 ktm5124

是的，但是'＃green'在哪裏？複雜性在於保持您所描述的流程佈局，同時還保留'＃green'的定位佈局。請參閱_＃的頂部必須位於#page_頂部的固定量 – Sepster 2013-03-09 17:30:25

模擬正常流量絕對定位div

回答

相關問題