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

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

Patricia Arquette

リリース： 2024-12-01 12:01:11

オリジナル

476 人が閲覧しました

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

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

問題:

ユーザーは、次のようなボタンを作成しようとしています。ビューポートからの垂直距離を固定し、ビューポートに関係なく、div の右端からの特定の距離も維持します。 size.

解決策:

水平位置:

ただし、提供されている「絶対水平」位置は技術的に実現できません。これを解決すると、div の右端から一定の距離を維持するという目標を達成できます。水平方向に固定された要素の left または right プロパティを設定しないようにすることで、コンテナ div を使用してその水平位置を制御します。

Vertical Positioning:

要素は配置されます。位置:固定プロパティを使用して垂直方向に固定されます。上部の値を設定すると、ビューポートのサイズに関係なく垂直方向の位置が維持されます。

コードサンプル:

次のコードは、実装:

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;
}

ログイン後にコピー

重要な考慮事項: