Question

如何在不更改结构的情况下使<div>内部包装器大于包装器本身？

HTML

<div class="page row1">
    <div class="home-wrapper row2">
        <div class="home-slider row3"></div>
    </div>
<div>

CSS

.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }

http://jsfiddle.net/46vpqmgh/1/

我希望黑框与页面<div>具有相同的宽度而不改变结构，仅使用CSS。

由于

Answer 1

添加：

position: absolute至.home-slider将其拉出正常流程
top: 0和left: 0至.home-slider以正确定位
position: relative到.page让它的孩子绝对定位相对于它的元素

百分比高度和宽度将根据.page的大小计算。

Have a fiddle!

添加了CSS

.page {
    position: relative;
}
.home-slider {
    position: absolute;
    left: 0;
    top: 0;
}

Read more about the CSS position property over on the MDN

绝对定位

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。 绝对定位的元素相对于最近定位的祖先定位。如果定位的祖先不存在，则使用初始容器。

在我们上面的例子中，最近的定位＆＃34;祖先＆＃34;是.page

Answer 2

添加以下属性。 Looks对我公平。

.home-slider {
    /* ... */
    z-index: 1;
    margin-left: -5%;
    position: fixed;
}

Answer 3

更改以下类：

.home-slider {
    width: 100%;
    height: 200px;
    border: 1px solid blue;
    background:#000;
    position: absolute;/*Add position absolute*/
    left: 0;/*Add left to 0*/
}

fiddle

如何在不改变结构的情况下使div包装器内的包装器大于包装器本身

3 个答案: