有没有办法让子div的背景扩展到父div之外？

Question

<div id = 1>
   <div id = 2>
     //I want to expand the background of this div outside of the bounds 
     //of is parent
   </div>
</div>

所以我有一个div嵌套在另一个div内。父div与屏幕中心对齐。我希望孩子能够拥有占据屏幕宽度的背景而不改变内部内容的位置。这样做最好的方法是什么？

Answer 1

您可以使用负边距来实现：

margin: -20px 0 0 -20px;

查看我制作的快速JSFiddle：https://jsfiddle.net/qcsra5yg/1/

Answer 2

您可以使用::after来实现此目的。

HTML

<div class="parent">
  <div class="child">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, in.</div>
</div>

CSS

.parent {
  display:flex;
  justify-content:center;
  align-items: center;
  background:rgba(255,255,255, .6);
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
}

.child {
  width: 100px;
  height: 100px;
  position:relative;
}

.child:after {
  z-index:-1;
  content:'';
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:red;
}

EXAMPLE

EXAMPLE 2