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

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

問題:

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

解決策:

水平位置:

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

Vertical Positioning:

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

コード サンプル:

次のコードは、実装:

HTML:

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

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.inflow div が固定幅である場合、.positioner div は必要ない可能性があります。固定要素の左マージンを直接設定します。
• オーバーフローの設定: コンテナ div で非表示にしても、境界外の固定要素の位置には影響しません。

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