1. ホーム
  2. css

[解決済み] 位置固定が効かないのが絶対のように効いている【非公開

2022-02-08 16:37:54

質問

私の質問は非常に簡単です。モバイル版のページで、黄色いボタンquot;snag it"を下に固定したいのですが、position fixedが機能せず、position absoluteのように機能しており、なぜかわかりません。

私が作業しているページ。 https://www.thechivery.com/products/everything-is-j-ok-tee

ありがとうございます。 ルイズ

解決方法は?

この問題は .content-container のラッパークラスがあり、CSS 宣言が webkit-transform: translate3d(0,0,0) . 変換宣言は この回答では の場合、ビューポートから回転した要素に位置コンテキストを変更します。 fixed 要素は、あたかも絶対位置であるかのように振る舞います。以下は、変形した div と、その外側にある固定要素 div .

.rotate {
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}
<div class="rotate">
  <div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>

すべてを機能させるためには、まず最初に transform3d の宣言は .content-container .