模拟正常流量绝对定位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

回答

相关问题