Question

我需要在容器div中将第3层div分层并将它们全部放在彼此之上。我该怎么做？

这是html：

<div class="outer">
    <div class="top"></div>
    <div class="middle"><span class="inside-middle"></span></div>
    <div class="bottom"></div>
</div>

.outer是容器，.top，.middle和.bottom都在彼此的顶部，并且都是相同的高度和宽度。

.inside-middle，其中的文字与右边对齐。

非常感谢任何建议。

Answer 1

这是一个更容易阅读的编辑。为方便起见添加了彩色边框......

.outer{
position:relative;
height:200px;
width:200px;
border:solid blue 1px;
}

.top, .middle, .bottom{
height:200px;
width:200px;
border:solid red 1px;
top:0;
left:0;
position:absolute;
}

.bottom{
border:solid orange 1px;
}

.middle{
border:solid green 1px;
}

.inside-middle{
text-align:right;
display:block;
}

Answer 2

除了更改块级元素之外。这听起来像是一个非常简单的实现，你可以通过一些定位将它们堆叠在一起。

我在http://jsfiddle.net/AjuaV/2/

处整理了一个样本

你也希望inside-middle也是一个块级元素，因为text-align不会对像span这样的内联元素做任何事情。

CSS Layer 3 div在容器div中彼此叠加

2 个答案: