1

CSS专家的一个 - div是否有可能“逃脱”具有固定尺寸的div边界的约束和overflow:hidden？

我在这里重新创建了示例：http: //jsfiddle.net/Wt3q4/1/

我尝试在所有元素上设置 z-indexes，并b position:absolute毫无乐趣地为 div 分配类。

4

3 回答 3

2

由于.b嵌套了一个元素 that's position:relative;，设置.b为 absolute 不会做任何事情。据我所知，使用您定义的元素结构，不会有 CSS 解决方法。

如果不了解更多关于您的布局以及您要完成的工作，很难提出建议。如果有意义，您可以尝试设置一个“双容器”，并overflow:hidden;在您想要显示它时使用 jQuery 函数将元素移出元素。

http://jsfiddle.net/Wt3q4/3/

HTML

<div class="a">

    <div class="b">
        <div class="c">
        </div>
    </div>    

</div>

<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>

CSS

.a{
    position:relative;
    height:200px;
    width:200px;
    border:3px solid #f00;
    background:#ccc;
}

.b{
    position:relative;
    height:200px;
    width:200px;
    background:#ccc;
    overflow: hidden;
}
.c{
    width:50px;
    height:300px;
    border:3px solid #00f;
    background:#dad;
    margin:30px;
    position:absolute;
    z-index:333;
}
.hidden{
    display: none;
}
.button {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 3px solid #aaa;
    background: #ddd;
    margin: 20px;
    float: right;
}

jQuery

$('#show').on('click', function(){
    $('.c').prependTo('.a');
    $('.b').addClass('hidden');
});

$('#hide').on('click', function(){
    $('.c').prependTo('.b');
    $('.b').removeClass('hidden');
});
于 2013-04-17T14:57:28.337 回答
0

根据我对 CSS 块格式上下文的理解，您div.b是 的子级div.a，这意味着div.a为div.b. 在父元素上设置overflow: hidden后，任何流出父内容框的子内容都将不可见。

如果您在父容器上进行设置，则这一点会更加明显，outline: 1px solid black这样您就可以看到内容框的扩展，无论是overflow隐藏的还是可见的。

您的问题确实涉及 CSS 视觉格式模型的基本要素。

于 2013-04-17T15:06:51.640 回答
0

怎么样：

.menu > li > ul {
    position: absolute; /* you still need this here */
    background-color: #9F26B4;
    width: 10000000000000000px;
    margin-left: -100000px;
    padding-left: 100000px;
    list-style: none;
    z-index: 1000;
    top: 0;
    left: 0;
}

例如，这会从左到右溢出整个页面（假设 body overflow-x 设置为隐藏），然后将元素宽度设置为巨大宽度，将其边缘设置为负左以填充任何左侧内容，并填充到left 将元素内的对象移动到所需的 X 位置。你认为呢？

于 2015-03-31T15:49:27.777 回答