有什么方法能够突破父级元素的width:[small]px，overflow: hidden，让超出父元素的子元素显示出来？

这样说可能比较抽象，举个例子

<html>
    <head>
        <style>
            .p {
                width: 200px;
                overflow: hidden;
            }
            
            .c {
                width: 300px;
            }
        </style>
    </head>

    <body>
        <div class="p">
            <div class="c"></div>
        </div>
    </body>
</html>

如上所示，子元素c超过父级元素的区域显示不出来，只能显示200px。把子元素设置为绝对定位试过，但是还是不行？不知道大家有什么解决方法？谢谢大家。

====== 补充下 ======

子元素还是要跟随父元素滚动

====== 再补充下 =======

直接absolute是可以的(怀疑这是否没有relative的父级元素，相对父级元素可能是body)，但是这是后我的子元素需要相对父元素绝对定位。代码如下：

p {
    position: relative; /*加了这行就没法突破了*/
}

好吧，我是最后设置指定元素 overflow: visible...

html css

阅读 18.2k

5 个回答

✓ 已被采纳

谢邀。

可用fixed进行突破
https://jsfiddle.net/d74khbuq/1/

用absolute + transform 进行突破
https://jsfiddle.net/d74khbuq/2/

kstd123

1.2k1621

发布于
2017-01-06

更新于
2017-01-06

<html>

<head>
    <style>
        .p {
            width: 200px;
            overflow: hidden;
           
        }
        
        .c {
            width: 300px;
            position:absolute;
        }
        .a{
            position:relative;
            width:200px;            
        }
    </style>
</head>

<body>
    <div class="a">
    <div class="p"></div>
    <div class="c">
    </div>
    </div>
</body>

</html>

vsion

补充题主:
因为父元素加了relative, 子元素的absolute就是基于父元素而不是更上层的定位(当前为html)了.

position: absolute;/*目测可以哦*/

目测可以哦

四月的桜和猫

3.3k53055

发布于
2017-01-06

我随便试了一下直接给子盒子一个定位position为abosolute 就可以了

<html>
<head>
    <style>
        .p {
            width: 200px;
            height: 300px;
            overflow: hidden;
            background: red;
        }

        .c {
            width: 300px;
            height: 200px;
            background: blue;
            position: absolute;
        }
    </style>
</head>

<body>
<div class="p">
    <div class="c"></div>
</div>
</body>
</html>

效果图：