时间戳

首页 > 解决方案 > 在父级之外展开一个子 div（具有 position: relative ）并且没有负边距

html - 在父级之外展开一个子 div（具有 position: relative ）并且没有负边距

问题描述

我正在尝试在我的项目中实现一个场景，其中我有一个父 div，它的左右两边有一些像素的边距，然后我在里面有一个子 div。我希望子 div 占据屏幕宽度的 100%。

PS：父级的位置是相对的。
我不想在子 div 上使用负边距。
子 div 在 shadowRoot 内部，而父 div 在其外部，
我无法应用 position: fixed to child，因为它将修复它 WRT 窗口，我不希望这样。

这是示例代码：

.full-width {
    position: absolute;
    width: 100%;
    left: 0;
    border: 10px red solid
}

.container {
    position: relative;
    max-width: 1440px;
    border: 10px black solid; 
    height:50vh
  
<div class="container">
    <div class="full-width"></div>
</div>

标签： htmlcsscss-position

解决方案

我希望我理解您的要求，但唯一的方法是删除position: relative您的.full-widthdiv

请参阅是否有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？

https://jsfiddle.net/83gvjsea/

推荐阅读