html - 固定要素の作成方法

Question

写真でわかるように、メニュータブを固定にする方法を教えてください。

div ポジショニング プロパティを に変更しようとしましたfixedが、問題は画像にオーバーレイされることです。をクリックすると、実際にメニュー部分が画面に出tab1ます。

メニューの部分を固定したいのですが、メニューの内容をクリックすると、つまりメニュー 1,2,3の右側の内容の部分が変わるはずです。

ここにファイルをアップロードしました: link。

Answer 1

以前の回答で申し訳ありませんが、解決策は 2 つあります。

CSS の使用:

コンテンツがこのセクションの下に完全に収まるようmargin-bottomにセクションに手動で設定できますが、このセクションの高さがいつでも変わらない場合を除き、これは適切な解決策ではありません。.navigator

jQuery の使用:

次を使用してheight値を指定できます。.navigator

$(".navigator").css({ height: $(".size").height() });

Answer 2

これは非常に簡単です。ドキュメント フローから要素をposition:fixed削除すると、その要素が画像の上に配置されます。

たとえば、それも配置する必要があります

.your-element{
position:fixed;
top:0; /* Positions top of your div to top of browser window*/
left:0; /*positions left of your div to left of the browser window*/
}

上記のコードは、常にウィンドウの左上隅に固定メニューを表示します。余白をいじって、必要な場所に正確に配置できます。