Zenn
📚

親要素より子要素の幅を大きくする方法 CSS

2021/07/07に公開
CSS
Scss
tech

marginを使う

親要素よりも子要素を大きくしたい。

要件

  • 親要素はpaddingを使用して余白を持たせているが、ある部分(灰色の部分)は画面いっぱいに広げたい
  • 要素同士を重ねる
.gray-block{
  height: 240px;
  background-color: #EDEDED;
  margin: 0 calc(50% - 50vw);;//親要素の半分の幅だけずらして、画面の半分の幅だけ戻す
  margin-top:-120px; // ネガティブマージンで画像に重ねる
  z-index: 1;
}

参考記事：子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS

Discussion