Web sayfalarını tasarlarken en önemli şey elemanların doğru konumlandırılmasıdır. Bu, Tailwind “konum” sınıfları kullanılarak kolayca yapılabilir. Konumlandırma farklı tiplerde olabilir, bunlardan biri statiktir.
Bu blog, öğenin statik olarak nasıl konumlandırılacağını gösterecektir.
DOM – Tailwind'de Bir Öğe Statik Olarak Nasıl Konumlandırılır?
Bir öğe “ kullanılarak statik olarak konumlandırılabilir. statik ” konum sınıfı. Statik konum, HTML öğeleri için varsayılan konumdur. “ile unsurlar konum: statik ” herhangi bir CSS stili olmadan sayfanın normal akışına göre konumlandırılır.
Sözdizimi
Uygulama sözdizimi “ statik ” sınıfı:
<öğe sınıf = 'statik' > ... < / öğe>
Burada öğe, konum özelliğinin uygulanabileceği herhangi bir etiket olabilir.
Statik konumlandırmanın pratik uygulaması için kodu ziyaret edin:
< vücut sınıf = 'metin merkezi' >< merkez >
< h1 sınıf = 'text-green-600 text-5xl yazı tipi-kalın' >
Statik Konum Örneği
< / sa1 >
< B >Arka Rüzgar CSS Konum Sınıfı< / B >
< div sınıf = 'statik metin-sol p-2 m-2 bg-yeşil-200 h-48' >
< P sınıf = 'Yazı tipi kalın' >Statik Olarak Konumlandırılmış< / P >
< div >Mutlak Konumlandırılmış öğe< / P >
< / div >
< / div >
< / merkez >
< / vücut >
Bu kodda:
- “ metin merkezi ” etiketlerinin içeriğini ekranın ortasına ayarlar.
- Yı kur ' ” etiketini “ kullanarak yeşile çevirin metin-yeşil-600 ”, metin boyutu “ ile beş katına ayarlanır metin-5×1 ” ve yazı tipi “ kullanılarak vurgulanır Yazı tipi kalın ”.
- İki ' ” öğeleri de oluşturulur ve ilk “ için statik sol taraf konumu ayarlanır. div ' kullanmak ' statik metin-sol ”.
- “Sınıflarını atayın s-2 ', ' m-2 ', ' bg-green-200 ', ' h-48 ” ikinci div için ve aynı zamanda “ düğmesini kullanarak konumunu mutlak sol alta ayarlayın. göreceli alt-0 sol-0 ' sınıf.
Çıktı
Yukarıdaki kodu dosyaya kaydedin ve onun tarafından oluşturulan ve şu şekilde görünecek web sayfasını önizleyin:
Statik olarak konumlanan öğe normal sayfa akışıyla hareket ederken diğer öğe mutlak konumunu korur.
Çözüm
Bir öğeyi DOM'da belgenin normal akışıyla statik olarak konumlandırmak için ' statik “Arka Rüzgar sınıfı” konum ' Yarar. Bu blog herhangi bir öğenin nasıl konumlandırılacağını gösterdi ' statik olarak ” basit bir pratik gösteri ile.