请引用this fiddle .
我需要 #blue div 的顶部与 #red 标题的底部保持固定距离(例如 2em)。换句话说，当 #red header 的垂直尺寸增加时，#blue div 应该“下推”(即由于视口(viewport)变窄导致菜单要包装的元素)。
我更喜欢纯 CSS 的解决方案，但如果有人能证实我的感觉，这不能仅靠 CSS 来完成，那么我也需要并感谢关于我应该 Hook 哪些 jQuery 函数的建议，以及哪些 DOM 事件。
注意事项:
除了当前
#bluediv 是(有效地)垂直放置在距离灰色#page 顶部固定距离之外，其他布局按原样工作分区。这意味着随着#redheader 变高，#red延伸到#bluediv“后面”，而不是“向下推”它。HTML 是受约束的，除了
#green和#bluediv 的顺序可以颠倒(在#main分区)。#blue相对于#page定位，而不是按照#redheader 之后的逻辑流定位，因为我要求定位它的#green同胞:#green的顶部 必须 与# 的顶部保持固定的位置页。我通过使
#green定位实现了这一点(正确或错误) 相对于白色边框的#maindiv，它在其中 实现水平位置，#main依次定位 绝对在#page内实现固定的垂直位置。这当然对
#blue的位置有影响。我只是不 确定是否有办法将这个 div 与另一个分开 使其返回到更“正常”的流程。对于
#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;
}
最佳答案
为什么不忘记相对定位，让 #green 从页面顶部绝对定位？
#page {
...
position:relative;
}
#green {
...
position: absolute;
left: 50%;
top:0.5em;
}
关于css - 模拟绝对定位 div 的正常流，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15313331/