css - 绝对定位和左右浮动

Question

这显然是矛盾的。我需要的是让两个子元素位于父元素的左右边缘，同时垂直居中并覆盖在所有其他兄弟元素上。

Answer 1

你可以使用leftand right。

.child
{
    position: absolute;
    top: 50%;
}

.child .left
{
    left: 0;
}

.child .right
{
    right: 0;
}

这top: 50%会将孩子的上边缘与父母的中间对齐。如果您的父级具有恒定大小，请使用像素大小。否则，您可能需要一些 javascript 才能使其完全正确。

编辑以回应评论：

要使其相对于父级而不是页面，您需要给父级position: relative;，它会起作用。默认位置是static，并且不适用于此。

Answer 2

如果我理解正确：

<div class="parent" style="position:absolute;height:70%;width:70%;top:15%;left:15%;background-color:#eee;border:solid blue 1px;">
    <div class="left" style="position:absolute;width:30%;height:70%;top:15%;left:0%;background-color:black;z-index:20;">left box vertically aligned</div>

    <div class="right" style="position:absolute;width:30%;height:70%;top:15%;left:70%;background-color:black;z-index:20;">right box vertically aligned</div>
</div>​

见：http: //jsfiddle.net/dankpiff/zmYEf/

如果您将下面的元素设置为较低的 z-index，它们将被“左”和“右”框覆盖

你是这个意思吗？