11

我已经设置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/

4

3 回答 3

6

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

有必要删除position:relativefrom .box，因为它的 span 是相对于绝对定位的.box，因此无法逃脱overflow:hidden限制。没有它，它会相对于主体绝对定位，然后可以.box使用负边距覆盖。

重要的是不要设置top, bottom,left或right虽然 - 这将导致它定位在距身体设定的距离处。如果您没有设置任何内容 (all 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/

于 2013-09-03T09:58:25.653 回答
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; 
}

演示

于 2013-09-03T10:03:45.317 回答
0

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

把你的元素放在这里

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

提琴手

于 2013-09-03T09:56:22.440 回答