Question

我为容器设置了overflow:hidden。我想为容器内部的元素设置绝对位置，以便它显示在容器外部，但是隐藏溢出不会让它显示。

对我来说，使用overflow:hidden作为容器很重要，因为我在容器中有很多元素。无论如何，它是否适用于overflow:hidden？

wrap的父元素是body标记，根据该标记很难确定位置。

HTML：

<div class="wrap">
    <div class="box">
        <span>Left</span>
        <div class="main"></div>
    </div>    
</div>

CSS：

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
    overflow: hidden;    /*causes the problem */
}

.box{
    position: relative
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    left: -50px;
}

演示： http://jsfiddle.net/c55hS/

Answer 1

正如其他人所说，这不是直接可能的。有一种解决方法，但无需更改标记 - 从position:relative删除.box，不要在绝对定位的元素上设置left和top，但使用否定边距将元素定位在您想要的位置。

有必要从position:relative移除.box，因为它的跨度绝对相对于.box定位，因此无法逃脱overflow:hidden限制。没有它，它将相对于身体绝对定位，然后可以使用负边距覆盖.box。

尽管设置top，bottom，left或right至关重要 - 这会使其定位到距离身体的设定距离。如果你没有设置任何东西（所有auto），它会以正确的内联位置显示。

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
}

.box{

}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    background:red;
    margin-left:-50px;
}

http://jsfiddle.net/c55hS/5/

Answer 2

稍微hacky，但这会奏效，

在.inner-wrap .wrap

中添加div

<div class="wrap">
    <div class="inner-wrap">

然后将left-padding添加到.wrap并将border向下移至.inner-wrap

.wrap{
    width: 500px;
    margin: 50px auto;
    overflow: hidden;    /*causes the problem */
    padding-left:50px;
}
.inner-wrap {
    border: 1px solid green; 
}

<强> DEMO

Answer 3

我不这么认为......我认为你应该把你的元素放在容器外面......

将您的元素放在此处

 <div class="wrap">
   <div class="box">
     <span>Left</span>
     <div class="main"></div>
   </div>    
 </div>

JsFiddle

CSS中隐藏的绝对位置和溢出

3 个答案: