使元素向左溢出答案

【问题标题】：Make an Element overflow to the Left使元素向左溢出
【发布时间】：2013-09-05 18:42:42
【问题描述】：

我想知道如何在这个小提琴中制作矩形：http://jsfiddle.net/gztdG/2/ 'overflow' 向左，以便矩形与正方形的右边缘对齐。一个简单的问题，但我不知道如何使用 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;
}

【问题讨论】：

这是sample。但是，使用它时要小心，因为它会更改direction，并且当您在div 中有文本时会导致问题。

标签： html css position alignment absolute

【解决方案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;
}

【讨论】：

@Harry 你不应该删除你的评论。这是一个非常有趣的解决方案。
感谢您的回复。虽然这适用于更简单的小提琴，但它不适用于我的项目 - 这是一个小提琴：jsfiddle.net/Q77gN 问题是矩形认为'right：0'意味着它应该与页面边缘对齐。本质上是一样的。你能看出它为什么不工作吗？
是的，我可以。您没有在矩形的父级上设置position: relative;。见这里：jsfiddle.net/Q77gN/2
我真是太傻了。关于我为什么不包括在内的长篇大论！
Harry 我很想看看你的解决方案！

【解决方案2】：

使用负边距，像这样：

margin-left:-150px;

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

【讨论】：

我所讨论的场景涉及 100% 的宽度，因此该值会有所不同。
好吧，你没提到。

【解决方案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 会将其推到右侧。

【讨论】：