html - 如何在不改变结构的情况下使 wrapper 内部的 div 大于 wrapper 本身

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

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

在我们上面的示例中，位置最近的“祖先”是 .page