position bir öğenin nasıl yerleştirildiğini ve offset özelliklerinin (top/right/bottom/left) uygulanıp uygulanmadığını kontrol eder.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute bir öğeyi konumlandırılmış en yakın atasına (static dışındaki her şey) göre konumlandırır. Bu yüzden ebeveyn üzerinde position: relative ayarlayarak onu referans noktası haline getirirsiniz:
.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 */
}
Bu relative-parent / absolute-child deseni her yerde görülür: badge'ler, açılır menüler, araç ipuçları, kapat düğmeleri.
.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) değerine ulaşana kadar göreceli olarak davranır, ardından konteyner görünümdeyken orada kalır — bölüm başlıkları için harika.absolute/fixed öğeler normal akıştan çıkarılır, bu nedenle alan ayırmaz — kardeşler orada olmamış gibi davranır, bu da çakışmaya neden olabilir. Bunun için plan yapın (örneğin sabit bir gezinme çubuğunu telafi etmek için padding ekleyin).
position yer paylaşımları, yapışkan başlıklar, modallar, açılır menüler ve badge'ler için gereklidir.
Relative-parent/absolute-child ilişkisi ve fixed-vs-sticky ayrımı, sürekli kullandığınız pratik özüdür.