HTML öğelerinin konumu, web sayfası bileşenlerinin düzenlenmesinde hayati bir rol oynar. Daha spesifik olarak, elemanların konumu CSS ' kullanılarak ayarlanabilir. konum ' Emlak. Bu özellik, sayfadaki öğeyi ayarlamak için belirli değerler sağlayan üst, sol, sağ ve alt özellikler gibi ofset özellikleriyle ilişkilendirilebilir. Ancak ' mutlak ” konumlu öğeler, en yakın konumlu öğeye göre ayarlanabilir.
Bu gönderi, CSS mutlak konumlandırmasını açıklayacaktır.
CSS “konum” Özelliği
“ konum CSS'deki ” özelliği, öğenin konumunu ayarlamak için kullanılabilir. Konum özelliğinin farklı değerleri sabit, mutlak, göreli, statik ve yapışkandır. Bu değerler, öğenin konumunu ayarlamak için üst, sağ, sol ve alt gibi ofset özellikleriyle ayarlanır.
CSS Mutlak Konumlandırma Nasıl Uygulanır?
Öğenin mutlak konumlandırması, CSS ' kullanılarak uygulanabilir. konum ' değeri olan özellik ' mutlak ”. Mutlak konuma sahip öğe, en yakın konumlandırılmış üst öğeye göre ayarlanır. Ancak ata konumlandırılmamışsa, belgenin gövde bölümüne göre ayarlanacaktır.
Örnek vermek
Kavramı pratik bir örnekle anlayalım.
1. Adım: Bir HTML Dosyası Oluşturun
HTML dosyasında, body öğesinin içine “ sınıf adıyla bir div ekleyin. ana ”. Ardından, oluşturulan div'in içine aşağıdaki niteliklerle ilişkili bir HTML etiketi ekleyin:
-
- “ kaynak ” görüntüye bir bağlantı sağlar.
- “ sınıf ” CSS'de öğeleri biçimlendirmek için kullanılır.
- “ her şey ” özniteliği, görsel sayfaya yüklenemezse görselin yerine gösterilecek metni belirtir.
- “ her şey ” özniteliği, görsel sayfaya yüklenemezse sayfada görselin yerine gösterilecek metni belirtir.
Ardından, başlığı ve paragrafın h1 ve p öğelerini içeren başka bir div ekleyin:
< div sınıf = 'ana' >< div sınıf = 'içerik' >
< img kaynak = 'resimler/linuxlogo.png' sınıf = 'ev' her şey = 'linux logosu' Genişlik = '80 piksel' >
< h1 > CSS mutlak konumlandırma h1 >
< p > Merhaba Linuxhint ekibi ! p >
div >
div >
CSS'de, HTML öğelerini süslemek için birkaç stil özelliği kullanılır.
2. Adım: 'Tüm' Öğelerin Stilini Oluşturun
* {yazı tipi ailesi: Verdana, Geneva, Tahoma, sans-serif;
}
HTML öğelerinin stili “ font ailesi ' değeri olan özellik ' Verdana, Geneva, Tahoma, sans-serif ”. Bu değerler listesi, tarayıcı ilk stili desteklemiyorsa diğerinin uygulanmasını sağlar.
3. Adım: “ev” div stilini oluşturun
.ev {pozisyon: mutlak;
üst: 50 piksel;
sol: 45 piksel;
}
Aşağıda “ için uygulanan özellikler bulunmaktadır. ev ” div:
-
- “ konum ” özelliği, öğenin konumunu ayarlar. Burada eklenen “ mutlak ”, öğeyi HTML'nin gövde bölümüne göre yerleştirir.
- “ tepe Elemanın dikey ayarı için ” özelliğinden yararlanılır.
- “ sol ” özelliği elemanın yatay ayarı için kullanılır.
4. Adım: “içerik” div stilini oluşturun
.içerik {arka plan rengi: cadetblue;
genişlik: 300 piksel;
yükseklik: 250 piksel;
sol dolgu: 40px;
sol kenar boşluğu: 80 piksel;
}
Aşağıda “ öğesine uygulanan CSS özellikleri bulunmaktadır. içerik ” div:
-
- “ arka plan rengi ” özelliği, öğenin arka plan rengini ayarlar.
- “ Genişlik ” özelliği, öğenin genişliğini ayarlar.
- “ boy uzunluğu ” özelliği, öğenin yüksekliğini ayarlar.
- “ sol dolgu ” özelliği, öğe içeriğinin sol tarafına boşluk ekleyecek şekilde ayarlanmıştır.
- “ sol kenar boşluğu ” özelliği, elemanın sol tarafındaki boşluğu belirtir.
Bu noktada web sayfamız aşağıdaki gibi olacaktır.
Yukarıdaki sonuçtan div home görüntüsünün belge gövdesinin üstten 50px ve soldan 45px yerleştirildiği görülebilir. Ayrıca, home div'in konumu HTML'nin gövde bölümüne göre ayarlanır.
Öğenin Konumlandırılmış Ana Öğeye “göreli” Konumu Nasıl Ayarlanır?
Bu bölüm, öğenin konumunu en yakın ana öğe konumuna göre ayarlama konusunda size rehberlik edecektir.
“content” div'in “position” Özelliğini ayarlayın
konum: göreli;
Öğenin konumunu üst öğeye göre ayarlamak için ' konum ' ana öğenin özelliği ' olarak akraba ' değer.
“img” Elemanının “position” Özelliğini ayarlayın
.ev {pozisyon: mutlak;
üst: 100 piksel;
sol: 220 piksel;
}
Buraya:
-
- “ konum ' değeri ' olarak ayarlanan özellik mutlak ”, üst öğeye göre konumlandırılacaktır (yani içerik div konumu, göreli değerle ayarlanır).
- “ tepe ” özelliği, eleman konumunun üstten ayarlanması için kullanılır.
- “ sol ” özelliği soldan eleman konumunu ayarlamak için kullanılır.
Çıktı
Görüntünün üst div'ine göre konumlandırıldığı ve uygun göründüğü sonuçtan görülebilir.
Çözüm
CSS “ konum ” özelliği, HTML öğelerinin konumunu ayarlamak için kullanılır. Bu özellik sabit, göreceli, mutlak, yapışkan ve statik olarak değerlendirilebilir. “ mutlak ” değeri, öğeyi, yakındaki konumlandırılmış üst öğeye karşılık gelen konumlandırır. Bu gönderi, CSS mutlak konumlandırmasını pratik bir örnekle açıkladı.