[解決済み] 位置固定が効かないのが絶対のように効いている【非公開
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
.
関連
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] divを親の中で自動的に縦に重ねるにはどうしたらいいですか?
-
[解決済み] SPANのheightプロパティを設定する方法
-
[解決済み] Bootstrap 4のclass="mb-0 "とは何ですか?
-
[解決済み] セレクトボックスのテキストを中央揃えにすることは可能ですか?
-
[解決済み] 絶対位置指定された要素をdivの中央に配置するにはどうしたらよいですか?
-
[解決済み] 位置は固定だが、容器に対して相対的
-
[解決済み] 位置は絶対だが、親に対して相対的
-
[解決済み] 固定位置でz-indexが機能しない
-
[解決済み】絶対位置のdivが親divの高さを拡張するようにした。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】divの重なりについて
-
[解決済み] CSSでボックスの下枠を削除する方法
-
[解決済み] CSSで残りの幅を埋める
-
[解決済み] CSSでボーダーの不透明度を設定することはできますか?
-
[解決済み] <label for=""> CSSを非表示にする方法
-
[解決済み] このベベルボタンをCSSで実現するには?
-
[解決済み] テーブルの行にマージンを追加する方法 <tr> [重複]。
-
[解決済み] CSSでitempropをターゲットにする?
-
[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成
-
[解決済み] iPad Safariのスクロールにより、HTML要素が消えて、遅れて再表示される