positionプロパティでfixedがおかしくなる
この記事の目次
position:fixed
cssのプロパティposition:fixedはウィンドウに対して要素の位置を固定するときに使うプロパティ
この指定をしつつ、表示する座標を指定するだけで、要素の位置を固定することができます
ただし、親要素に「transform」の指定がある場合は例外になり、親要素からの相対配置に代わります
結果固定位置にはならず、位置もおかしな場所に移動します
直すには「transform」を外すしか方法は見つけてられていませんので、この形で対処しましょう
コードを抜粋しておきました
|
1 2 3 4 5 6 7 8 9 10 |
<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 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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; } |
