position: fixedで位置を指定した要素の親要素にoverflow: hiddenを指定を併用したい場合、親要素のtransform, perspective, filterを指定する 👀

f:id:kimizuka:20200923205445p:plain

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 160px; height: 160px;
  background: red;
  overflow: hidden;
}

.child {
  position: fixed;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  background: blue;
}

DEMO

なぜならば、positionをfixedにした要素は、ビューポートによって定められた初期の包含ブロックに対して相対配置されるからです。

developer.mozilla.org

もしも、positionをabsoluteに変更できるのであれば、はみ出した部分を隠すことができます。

CSS

.parent {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 160px; height: 160px;
  background: red;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  background: blue;
}

DEMO

これが一番簡単な解決方法ですが、のっぴきならない理由で、どうしても、positionをfixedにしなければならない場合もなくはないです。

そんな時は、親要素のtransform, perspective, filterを明示的にnone以外に指定してあげれば、それが包含ブロックとして機能するようになるため、はみ出した部分が隠れるようになります。

developer.mozilla.org

transform: scale(1)を明示的に指定

CSS

.parent {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 160px; height: 160px;
  background: red;
  transform: scale(1);
  overflow: hidden;
}

.child {
  position: fixed;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  background: blue;
}

DEMO

perspective: 0を明示的に指定

CSS

.parent {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 160px; height: 160px;
  background: red;
  perspective: 0;
  overflow: hidden;
}

.child {
  position: fixed;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  background: blue;
}

DEMO

filter: blur(0)を明示的に指定

CSS

.parent {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 160px; height: 160px;
  background: red;
  filter: blur(0);
  overflow: hidden;
}

.child {
  position: fixed;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  background: blue;
}