html - Weebly 突破内容 div

Question

我希望能够创建一个横跨整个屏幕宽度的 div。问题是，这应该与 Weebly 的设计系统一起工作，该系统将它放在固定宽度的 div 中。

内容创建如下:

#main-wrap {
        width:100%;
}

.container {
    margin: 0 auto;
    width: 960px;
    position: relative;
}

<div id="main-wrap">
    <div class="container">
        {content}
    </div><!-- end container -->
</div><!-- end main-wrap -->

在 {content} 中，Weebly 施展魔法并放置您所有的东西。我尝试直接嵌入一些代码:

.wide {
    position: absolute;
    left:0; right:0;
    width: 100vw;
    background: #aaccff;
}

<div class="wide">
    Test
</div>

但这不起作用，宽 div 比屏幕宽，但仅从与内容 div 相同的左侧位置开始。

有谁知道如何在容器内获得 100% 宽的 div。我也可以使容器 100% 宽，但是所有的 Weebly 小部件都占据了屏幕的整个长度，而且我不清楚如何修改 CSS 以使它们具有固定宽度。

谢谢!

Answer 1

这是因为父元素是相对定位的。因此，从元素 .container

中删除 position: relative;