使绝对定位的子元素力在溢出隐藏的父元素上可见？答案

【问题标题】：Make absolutely positioned child element force visible on overflow hidden parent element?使绝对定位的子元素力在溢出隐藏的父元素上可见？
【发布时间】：2015-08-05 12:28:11
【问题描述】：

有没有办法让绝对定位的子元素强制在溢出隐藏的父元素上可见？下面是我正在尝试的代码 sn-p 。

div{
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #ccc;
}

div span{
    position: absolute;
    top: 10px;
    right: -25px;
    display: block;
    width: 50px;
    height: 50px;
    background: #444;
}

div p{
    padding: 10px;
}

<div>
    <span></span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

这里是小提琴链接http://jsfiddle.net/2m93zbhL/

【问题讨论】：

我也尝试过使用 CSS 'clearfix' 但似乎不起作用link

标签： css overflow hidden

【解决方案1】：

不，不是。

只需添加另一个 div ：

<div class="wrapper">
        <span></span>
        <div class="container">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>

并将“overflow:hidden”属性放在内部 div 上：

.wrapper{
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }

    .container{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }

    .wrapper span{
        position: absolute;
        top: 10px;
        right: -25px;
        display: block;
        width: 50px;
        height: 50px;
        background: #444;
    }

看到这个小提琴：http://jsfiddle.net/2m93zbhL/1/

【讨论】：