Home > CSS > positionプロパティでfixedがおかしくなる

positionプロパティでfixedがおかしくなる

CSS2019.02.08

この記事の目次

position:fixed
- コードを抜粋しておきました

position:fixed

cssのプロパティposition:fixedはウィンドウに対して要素の位置を固定するときに使うプロパティ
この指定をしつつ、表示する座標を指定するだけで、要素の位置を固定することができます

ただし、親要素に「transform」の指定がある場合は例外になり、親要素からの相対配置に代わります
結果固定位置にはならず、位置もおかしな場所に移動します

直すには「transform」を外すしか方法は見つけてられていませんので、この形で対処しましょう

デモページ

position:fixed;を使ったときにおこるバグを再現したデモページ

コードを抜粋しておきました

<body>
  <div class="ari">
    <p>fixed<br>親要素にtransform付き</p>
  </div>
  <div class="nasi">
    <p>
      fixed<br>親要素にtransform無し
    </p>
  </div>
</body>

1

2

3

4

5

6

7

8

9

10

<body>

<p>fixed<br>親要素にtransform付き</p>

</div>

<p>

fixed<br>親要素にtransform無し

</p>

</div>

</body>

body {
  height: 300vh;
  background: linear-gradient(#05FBFF, #1E00FF);
}
div p {
  width: 200px;
  height: 200px;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 50%;
}
.ari {
  transform: rotate(10deg);
}
.ari p {https://weblasts.com/wp-admin/media-upload.php?post_id=700&type=image&TB_iframe=1
  top: calc(50% - 100px);
  left: calc(25% - 100px);
  background-color: #8babff;
}
.nasi p {
  top: calc(50% - 100px);
  left: calc(75% - 100px);
  background-color: #ff8bb3;
  text-align: center;
}

1

2

3

4

5

6

7

8

9

10

11

12