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

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Susan Sarandon

Dec 16, 2024 pm 08:38 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。