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

如何在不改变结构的情况下使

内部包装比包装本身更大

HTML

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

我希望黑框与页面的宽度相同，而不改变结构，只使用CSS

---

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

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

加：

• 位置：绝对

  至

  。主滑块

  将其拉出正常流量

• 顶部：0

  和

  左侧：0

  至

  。主滑块

  可将其正确定位

• position:relative

  to

  。page

  使其子元素相对于它绝对定位

高度和宽度百分比将根据

.page

的大小计算

添加CSS

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

绝对定位

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

---

在上面的示例中，最近的“祖先”是

。page

更改以下类：

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

---

我需要调整宽度，而不是高度，但@ling-s

位置：固定的

使其相对于视口定位，在本例中效果很好，但与页面上的其他元素相比会很痛苦。你是对的，已经对你的答案投了赞成票。不过我认为这是一个快速解决办法，别打我：）*放下手*举起@Seçkin。

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