要素を垂直に固定して完全に水平に配置するにはどうすればよいですか?

要素を垂直方向に固定および絶対水平方向に配置する方法

Web 開発では、多くの場合、要素を次の方法で配置する必要があります。ビューポートのサイズに関係なく一貫性が保たれます。そのようなシナリオの 1 つは、別の要素から特定の水平距離を維持しながら、要素を垂直に固定することです。

次の課題を考えてみましょう。コンテナ div の右側から一定の距離を維持するためのボタンが必要です。ボタンは、ビューポートのサイズに関係なく、ビューポート内の固定垂直位置に留まる必要があります。

<div class="container">
  <div class="button"></div>
</div>

希望の位置を実現する

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

これは、以下に示すように、位置: 固定と位置: 絶対の組み合わせcode:

このアプローチの鍵は、.button 要素の left/right プロパティを明示的に設定しないことにあります。代わりに、コンテナ div と追加の div (.positioner) を使用して水平位置を確立します。

.button 要素は .container div から水平位置を継承し、.positioner div は .button をプッシュします。コンテナ div の右側に向かってこの例では、.button 要素はコンテナ div の右端から 15 ピクセルの距離を維持します。さらに、.button 要素の固定垂直位置 (上部: 60 ピクセル) により、その垂直位置に留まることが保証されます。ページのスクロールに合わせてビューポート内で表示されます。

以上が要素を垂直に固定して完全に水平に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。