Question

HTML：

<div id="outer1">
    <div class="bg">
        <div class="top"></div>  
        <div class="base"></div>  
    </div>  
    <div class="content"></div>
</div>
<div id="outer2">
    <div id="bg">
        <div class="top"></div>  
        <div class="base"></div>  
    </div>  
    <div class="content"></div>
</div>

CSS2：

div { width: 100%; }

#outer1, #outer2 {position: relative;}
#outer1 .top { height: 200px; background-color: blue; } 
#outer1 .base { height: 200px; background-color: yellow; } 

#outer2 .top { height: 200px; background-color: green; } 
#outer2 .base { height: 200px; background-color: yellow; } 

.content { 
    width: 160px; margin: 0 auto;
    position: relative; bottom: 250px; height: 300px; background-color: white; border: 1px solid black;}

This is the fiddle

白色黑色边框div（.content）应该位于分色背景上（.bg）（原样）。

使用相对定位 - 但我告诉它向上移动（250px）的空间仍由它的父（#outer1）拍摄。（两个'外部'div之间存在差距 - 它们应该触及）

我尝试了绝对定位，但由于内容div高于相对内容，因此高度不受尊重。并且因为它的动态内容我不能给它一个固定的高度（虽然我做了插图）

一个选项是javascript，另一个选项是上半部分使用后台转发器。

可以用纯CSS2实现吗？

Answer 1

编辑：完成重写...

这是新的小提琴：http://jsfiddle.net/FSXj8/14/

好的，所以我冒昧地从头开始。这是html

<div id="outer1" class="container">
    <div class="content">
        <div class="innerContent">hello world</div>
    </div>
    <div class="top"></div>
    <div class="base"></div>
</div>
<div id="outer2" class="container">
    <div class="content">
        <div class="innerContent">hello world</div>
    </div>
    <div class="top"></div>
    <div class="base"></div>
</div>

这是CSS

div {
    width: 100%;
}
.container {
    height: 400px;
    display: table;
    position: relative;
}
.top, .base {
    position: absolute;
    left: 0;
    height: 50%;
    z-index: 0;
}
.top {
    top: 0;
}
.base {
    bottom: 0;
}
#outer1 .top {
    background-color: blue;
}
#outer1 .base {
    background-color: yellow;
}
#outer2 .top {
    height: 50%;
    background-color: green;
}
#outer2 .base {
    height: 50%;
    background-color: yellow;
}
.innerContent {
    min-height: 100px;
    border: 1px solid black;
    background-color: white;
    width: 100px;
}
.content {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    z-index: 1;
    background-color: transparent;
    height: 100%;
}

Answer 2

不确定这是否是你想要的，你说了一些关于不使用绝对的东西：

.content { 
width: 100px; margin 0 auto;
position: absolute; margin-top:-250px; height: 100px; background-color: white; border: 1px solid black;}

http://jsfiddle.net/FSXj8/7/

试图将div放在其他两个相对或绝对的位置

2 个答案: