html - 使元素向左溢出

Question

我想知道如何在这个小提琴中制作矩形：http: //jsfiddle.net/gztdG/2/向左“溢出”，以便矩形与正方形的右边缘对齐。一个简单的问题，但我不知道如何使用 position: absolute 来实现。提前致谢。这是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

您还可以移动 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 会将其推向右侧。

Answer 3

使用负边距，如下所示：

margin-left:-150px;

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