ホームページ > ウェブフロントエンド > CSSチュートリアル > 要素を水平方向に絶対に配置し、垂直方向に固定するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-07 07:53:13
オリジナル
789 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート