Байрлал

Элементийн байрлалыг хурдан тохируулахын тулд эдгээр товчилсон хэрэгслийг ашиглана уу.

Нийтлэг үнэт зүйлс

Шуурхай байрлал тогтоох хичээлүүд байдаг ч хариу үйлдэл үзүүлэхгүй.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Тогтмол дээд

Элементийг харах талбарын дээд талд ирмэгээс ирмэг хүртэл байрлуул. Төсөлдөө тогтмол байрлалын үр дагаврыг ойлгож байгаа эсэхээ шалгаарай; Та нэмэлт CSS нэмэх шаардлагатай байж магадгүй.

<div class="fixed-top">...</div>

Тогтмол ёроол

Элементийг харах цонхны доод талд ирмэгээс ирмэг хүртэл байрлуулна. Төсөлдөө тогтмол байрлалын үр дагаврыг ойлгож байгаа эсэхээ шалгаарай; Та нэмэлт CSS нэмэх шаардлагатай байж магадгүй.

<div class="fixed-bottom">...</div>

Наалттай дээд

Элементийг харах талбарын дээд талд ирмэгээс ирмэг хүртэл байрлуулна, гэхдээ зөвхөн хажуугаар нь гүйлгэсний дараа. Энэ хэрэгсэл нь бүх хөтөч дээр бүрэн дэмжигддэггүй .sticky-topCSS-г ашигладаг .position: sticky

IE11 ба IE10 position: stickyнь position: relative. Иймд бид загваруудыг @supportsхайлтанд оруулаад, наалдамхай чанарыг зөвхөн үүнийг зөв гаргаж чаддаг хөтөчөөр хязгаарладаг.

<div class="sticky-top">...</div>