有没有办法让子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>

So I have a div nested inside of another div. The parent div is aligned to the center of the screen. I want the child to be able to have a background that takes up the width of the screen without changing the position of the content inside. What would be the best way to go about doing this?

Answer 1

You can use a negative margin to accomplish that:

margin: -20px 0 0 -20px;

Checkout a quick JSFiddle I made: https://jsfiddle.net/qcsra5yg/1/

Answer 2

You can use ::after to achieve this.

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