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

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

我不这么认为...我认为你应该将元素放在容器之外...

将您的元素放在这里

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

JsFiddle