position კონტროლირებს თუ როგორ განთავსდება ელემენტი და მოქმედებს თუ არა offset თვისებები (top/right/bottom/left).
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
position კონტროლირებს თუ როგორ განთავსდება ელემენტი და მოქმედებს თუ არა offset თვისებები (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute განთავსებს ელემენტს მის ყველაზე ახლოს განთავსებული ანდა (static-ისგან განსხვავებული რაიმე) მიმართებაში. ასე რომ თქვენ დააყენებთ position: relative მშობელზე მის საცნობარო წერტილად რომ გახადოთ:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
ეს relative-parent / absolute-child მოდელი ყველგან არის: ბეჯი, dropdown, tooltip, დახურვის ღილაკი.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), შემდეგ რჩება იქ სანამ მისი კონტეინერი ხილული არის — შესანიშნავი განყოფილების სათაურებისთვის.absolute/fixed ელემენტები ამოღებულია ნორმალური ნაკადიდან, ასე რომ ისინი არ ჯდება ადგილი — ძმა-და-ტის ელემენტები მოქმედებენ თითქო ისინი არ არსებობენ, რაც გადახურვის გამო შეიძლება. დაგეგმეთ ამ მხრივ (მაგ. დაამატეთ padding ფიქსირებული navbar-ის კომპენსაციისთვის).
position აუცილებელია overlay-სთვის, sticky header-ებისთვის, მოდალებისთვის, dropdown-ებისთვის და ბეჯებისთვის.
relative-parent/absolute-child ურთიერთობა და fixed-vs-sticky განსხვავება არის პრაქტიკული ბირთვი რომელიც თქვენ მუდმივად იყენებთ.