Css 模拟绝对定位div的正常流量

请参阅。

我需要

#蓝色

div的顶部与

#红色

标题的底部保持固定距离（例如2米）。换句话说，当

#red

标题的垂直大小增加时（即由于视图端口变窄导致菜单项换行），应“按下”蓝色

div

我更喜欢只使用CSS的解决方案，但如果有人能证实我的感觉，即单靠CSS是无法做到这一点的，那么我还需要并感谢关于我应该挂接哪些jQuery函数以及挂接哪些DOM事件的建议

注意事项：


除当前的
#蓝色
div（有效地）垂直定位在灰色
#页面顶部的固定距离之外，布局按原样工作。这意味着随着
#红色
标题变得更高，
#红色
延伸到
#蓝色
div的“后面”，而不是“推”把它放下

HTML受到约束，但
#绿色
和
#蓝色
div的顺序可以颠倒（在
#主
div中）

#蓝色
是相对于
#页面
定位的，而不是通过
#红色
标题后面的逻辑流定位的，因为我需要定位其
#绿色
同级：绿色

的顶部必须保持从

#页面

顶部固定的位置

我通过使

#绿色

定位实现了这一点（正确或错误） 相对于白色边框的

#main

div，其 达到水平位置，然后依次定位

#main

绝对在

#页面

内，以达到固定的垂直位置

这当然会影响

#blue

的位置。我只是不知道 当然，如果有什么办法可以让这个分区从另一个分区“脱离”出来 这样它就可以返回到一个更“正常”的流

对于

#green

的定位，我并不局限于这种方法 相对于

#页面

，只要

#绿色

是相同的，

#蓝色

由于

#红色

包装而向下移动 独立于

#绿色

执行此操作

非常感谢您的时间

HTML:

---

在：

#main

和

#blue

下取出

位置：绝对

，为什么不忘记相对位置，让

#green

绝对位于页面顶部

 #page {
    ...
    position:relative;
 }

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

---

绝对定位可能会让你头疼。但是这个想法很简单

#红色的{
高度：150px；/*可变高度*/
边缘底部：50px；/*红色和蓝色之间的固定距离*/
背景色：红色；
}
#蓝色的{
高度：100px；
背景颜色：蓝色；
}

始终在问题本身中引用相关的代码和标记，而不仅仅是链接（即使是到JSFIDLE，尽管这是一个很好的附件）。原因：@T.J.Crowder完成了，谢谢你的建议。请参考页面顶部，绿色必须保持在页面顶部的固定位置。。不过我有个建议。。你似乎有很多交叉的条件。。这使得阅读你的问题相当困难。。我的建议是将条件嵌入html本身。。ie如果我在JSFIDLE上加载html页面。。我可以在绿盒内部看到绿盒的要求。。通过这种方式，它变得更具可读性..条件已概述，但在CSS中；-）谢谢你的时间，我真的很感谢你的帮助。很好的建议。是的，但是这里面的绿色在哪里？复杂性在于维护您描述的流程布局，同时保持

#绿色

的定位布局。参考#绿色的顶部必须从#页面顶部保持固定的位置要澄清，你是说我应该从

#main

，

#蓝色

和

#绿色

中删除相对位置，在

#页面

上保留相对位置，并在

#绿色

上应用绝对位置？是的。这很有效。看不见森林的树木。谢谢你的帮助！

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;
}

 #page {
    ...
    position:relative;
 }

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

<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;
}