要素を水平方向に絶対に配置し、垂直方向に固定するにはどうすればよいですか?-CSSチュートリアル-php.cn

要素を水平方向に絶対に配置し、垂直方向に固定するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-07 07:53:13

オリジナル

792 人が閲覧しました

How Can I Absolutely Position an Element Horizontally and Fixed Vertically?

要素を絶対的に水平方向に、垂直方向に固定して配置します

目的は、別の要素の右端から一定の距離を維持するボタンを作成することですビューポートのサイズに関係なく、 window.

解決策

これを実現するには、CSS 配置プロパティの組み合わせを使用できます:

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

ログイン後にコピー

CSS:

.container {
  position: relative;
}

.button {
  position: absolute;
  right: 10px;  /* Distance from the right edge of the container */
  top: 100px;   /* Distance from the top of the viewport */
}

ログイン後にコピー

.button の位置を絶対的なものであるため、通常のドキュメントフローから独立させます。 right プロパティはコンテナの右端からの水平距離を指定し、top はビューポートの上部からの垂直距離を定義します。

注: このソリューションは、次の固定要素を作成します。コンテナに対して水平に配置され、質問の「垂直に固定、絶対水平」の条件を満たします。

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