CSS 绝对定位和左/右浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10114733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute positioning and float left/right
提问by DMIL
This is apparently contradictory. What I need is to have two child elements positioned at the left and right edges of the parent element while vertically centered and overlaid over all other sibling elements.
这显然是矛盾的。我需要的是将两个子元素定位在父元素的左右边缘，同时垂直居中并覆盖在所有其他同级元素上。
回答by Tesserex
You can use leftand rightfor that.
你可以使用left和right。
.child
{
position: absolute;
top: 50%;
}
.child .left
{
left: 0;
}
.child .right
{
right: 0;
}
The top: 50%will align the top edge of the child to halfway down the parent. If your parent has a constant size, use pixel sizing. Otherwise you'll probably need some javascript to get it exactly right.
在top: 50%将调整孩子的顶边到一半时父。如果您的父级具有恒定大小，请使用像素大小。否则，您可能需要一些 javascript 才能使其完全正确。
edit in response to comment:
编辑回应评论：
To make it relative to the parent instead of the page, you need to give the parent position: relative;and it will work. The default position is staticand that won't work for this.
要使其相对于父级而不是页面，您需要提供父级position: relative;并且它会起作用。默认位置是static，这不适用于此。
回答by d-_-b
If I undestand correctly:
如果我理解正确：
<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>?
see : http://jsfiddle.net/dankpiff/zmYEf/
见：http: //jsfiddle.net/dankpiff/zmYEf/
If you set the elements underneath with a lower z-index they will be covered by the 'left' and 'right' boxes
如果您使用较低的 z-index 设置下方的元素，它们将被“左”和“右”框覆盖
Is this what you mean?
你是这个意思吗？
