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

問題:

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

解決策:

水平位置:

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

Vertical Positioning:

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

コード サンプル:

次のコードは実装を示します:

HTML:

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