Question

我想知道如何在这个小提琴中制作矩形：http://jsfiddle.net/gztdG/2/'溢出'到左边，这样矩形就会对齐到正方形的右边缘。一个简单的问题，但我无法弄清楚如何用position来实现这个：绝对。提前致谢。这是html：

<div id='square'>
<div id='rectangle' />
</div>

这是css：

#square {
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:absolute;
}

Answer 1

我认为，正确的答案是在父容器上设置position: relative;，然后将矩形对齐到右边（请参阅此http://jsfiddle.net/gztdG/5/）：

#square {
    position: relative; <---
    height:50px;
    width:50px;
    background:blue;
    margin:auto;
}
#rectangle {
    position:absolute;
    right: 0;           <---
    width:200px;
    height:20px;
    background:red;
}

Answer 2

使用负边距，如下：

margin-left:-150px;

http://jsfiddle.net/4qr7z/1/

Answer 3

你也可以移动div标签，这样矩形就不会被包裹在正方形中（除非你的设计需要它）

<div id='square'></div>
<div id='rectangle'></div>

#square {
height:50px;
width:50px;
background:blue;
margin-left:150px;
overflow:auto;

}
#rectangle {
width:200px;
height:20px;
background:red;
position:relative;

}

这会移动方块，并使用margin-left：150px;

我可以想象这个有用的原因是页面是从左到右加载的，所以如果移动窗口，你可能会遇到一些位移，因为margin-left：-150px会向右推。

使元素向左溢出

3 个答案: