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

Question

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

P.S.：父级的位置是相对的。
我不想在子 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>  

Answer 1

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

参考Is there are way to make a child DIV's width wider than the parent DIV using CSS?

https://jsfiddle.net/83gvjsea/

Answer 2

我相信您可能正在寻找 FIXED 职位而不是 ABSOLUTE。对不起颜色，但它可以很容易地看到固定的工作原理。但是，这可能会破坏网站的其他功能。

除此之外，我认为您尝试做的事情与当前 HTML/CSS 网络中布局的构建方式和定位方式相悖。

body{
  background-color:fuchsia;
}
.full-width {
    position: fixed;
    left:0;
    right:0;
    background-color:yellow;
}

.container {
    position: relative;
    height:200px;
    width:140px;
    background-color:#ddd;
    max-width: 140px;
    padding: 0 10px;
}

<div class="container">
    <div class="full-width">
    hello
    </div>
</div> 

Answer 3

<div class="container">
    <div class="full-width"></div>
</div>  

.full-width { position: absolute; width: calc(100% - 20px); 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> 

您可以根据父容器的边框宽度计算出子容器的宽度。

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