要素の固定垂直位置および相対水平位置を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

要素の固定垂直位置および相対水平位置を実現するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-16 20:38:10

オリジナル

466 人が閲覧しました

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

要素を垂直方向に固定し、水平方向には相対的に配置する方法

このシナリオでは、コンテナーの右側から固定距離にボタンを配置する必要があります。ビューポートのサイズ。また、一貫した垂直方向と水平方向のオフセットを維持しながら、ウィンドウとともにスクロールする必要があります。これを実現するには:

幅、高さ、右マージンが固定されたコンテナ div (div.inflow) を定義します。
オプションで、ラッパー div (div.positioner) を追加します。コンテナ内で固定要素を水平に配置します。
幅、高さ、および高さを定義して固定要素 (div.fixed) を作成します。上マージン。
位置を設定: ビューポートにアンカーするために固定要素に固定します。
固定要素の左または右の設定は避けてください。代わりに、コンテナとラッパーの div を利用して水平位置を確立します。

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

ログイン後にコピー

CSS:

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

ログイン後にコピー

注: コンテナー幅は固定されていません。固定要素をコンテナの右側にプッシュするには、ラッパー div (div.positioner) が必要です。

重要: コンテナ上でオーバーフロー: 非表示を設定します。境界外にある固定位置 div には影響しません。固定位置により、コンテナのオーバーフローコンテキストから効果的に削除されます。

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