Question

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

Answer 1

您可以使用left和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设置下面的元素，它们将被“左”和“右”框覆盖

这是你的意思吗？

绝对定位和左/右浮动

2 个答案: