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

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

ユーザーは、ビューポートのサイズに関係なく、div の右端から設定された距離を保つボタンの解決策を探しました。 、ウィンドウをスクロールしながら。これは、次の戦略を使用して実現できます:

HTML 構造

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <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.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

キー ポイント

• 固定垂直位置: 位置: div.fixed で固定されているため、確実にスクロールします
• 絶対水平位置: 固定水平位置は直接設定されません。代わりに、ラッパー div (div.inflow およびオプションで div.positioner) に依存して、親 div に対する相対的な位置を定義します。
• 動的調整: コンテナー div のサイズが変化すると、ボタンは右端からの適切な距離を維持します。
• オーバーフロー処理: 固定位置要素は、overflow: hidden プロパティが設定されている場合でも、そのコンテナ div のオーバーフロー コンテキストから除外されます。

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