web-dev-qa-db-ja.com

CSSでポジションスティッキーを使用すると、私の要素が左にくっついていないのはなぜですか？

大きなDIVを垂直方向または水平にスクロールするときに、スティッキーを使用して画面の左右に要素を固定したいです。上への固定は正常に機能していますが、左に固定されていません。これは私のHTMLページです。

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
} _
<div>
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div> _

私はまた上または左のどちらかを使って同じ結果で試してみました。私は何かが足りない.

上位位置が固定されているのはなぜ左位置ではありませんか？希望の行動を取得するためにページを修正する必要がありますか？

htmlcsssticky
7
Erik Vorstenbosch

スティッキ要素は別のブロックレベル内のブロックレベル要素であるため、その親要素がすでに100％幅で、左側の付箋の余地がない場合は既に100％幅があります。

よりよく見るためにいくつかの境界線を追加します。

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
} _
<div style="border:2px solid red;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div> _

緑色のボックスは赤のものの内側にのみ貼り付けることができ、明るい要素はあふれています。追加inline-blockねじ込み要素（幅100％の制約を取り除くために）（幅100％の制約を取り除くため）（LightBlue要素で成長するため）で、予想される結果があります。

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
  display:inline-block
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
} _
<div style="border:2px solid red;display:inline-block;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div> _
0
Temani Afif