Переполнение дочернего элемента div-color над родительским элементом div

Question

Есть ли способ переполнить цвет фона дочернего элемента над его контейнером родительского элемента? Я пытаюсь добавить полноэкранный цвет фона, но у родительского элемента div фиксированная ширина. вот моя структура HTML:

<div id="parent">
    <div class="child">PAGE TITLE</div>
</div>

CSS:

#parent {
    max-width: 760px;
}

.child {
    width: 100%;
    background-color: red;
}

Answer 1

не знаю, хотите ли вы этого.

#parent {
    max-width: 760px;
    margin: 10px auto;
}

.child:before {
    width: 100%;
    height: 24px;
    content: ' ';   
    position: absolute;
    left: 0;
    z-index: -1;
    background-color: green;
}

Примечание: цвет фона # parent должен быть прозрачным, чтобы эти css работали.

Проверьте мой скрипка

Answer 2

Используйте box-shadow для имитации переполнения фона, поскольку он имеет сплошной цвет:

#parent {
  max-width: 760px;
  height: 100px;
  padding: 10px 0;
  margin:auto;
  background:blue;
}

.child {
  width: 100%;
  height: 100%;
  background-color: red;
  box-shadow:
    760px 0 0 red,
    1520px 0 0 red,
   -760px 0 0 red,
   -1520px 0 0 red;
}

<div id="parent">
  <div class="child">PAGE TITLE</div>
</div>

Answer 3

То, что вы пытаетесь сделать, невозможно при текущей настройке кода, поскольку для дочернего элемента z-index установлен тот же индекс стека, что и для его родительского элемента, как и его измерения, если вы используете проценты.

Вы будетенужно сделать что-то подобное для достижения желаемого результата.

HTML

<div id="parent">
    <div class="child">PAGE TITLE</div>
</div>

<div id="page"></div>

CSS

#parent {
    max-width: 760px;
    background: green;
}

.child {
    width: 100%;
    background-color: red;
}

#page {
    width: 760px;
    height: 760px;
    background: green;
    position: relative;
    z-index: 1;
}