Есть ли способ сделать фон дочернего элемента 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

Для этого можно использовать ::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;
}

ПРИМЕР

ПРИМЕР 2

Answer 2

Вы можете использовать отрицательную маржу для достижения этого:

margin: -20px 0 0 -20px;

Оформить заказ быстрого JSFiddle, который я сделал: https://jsfiddle.net/qcsra5yg/1/