En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Layout - The position Property


position özelliği, bir element için kullanılan yerleştirme yöntemi türünü belirtir (static, relative, fixed or absolute) .


pozisyon Mülkiyet

position özelliği, bir element için kullanılan yerleştirme yöntemi türünü belirtir.

Dört farklı pozisyon değer vardır:

  • static
  • relative
  • fixed
  • absolute

Elemanlar sonra üst, alt, sol ve sağ özellikleri kullanılarak yerleştirilir. Olmadıkça Ancak bu özellikler çalışmaz position özelliği ilk ayarlanır. Ayrıca konum değerine bağlı olarak farklı çalışır.


position: static;

HTML öğeleri varsayılan olarak statik konumlandırılmıştır.

Statik yerleştirilmiş elemanlar üst, alt, sol ve sağ özellikleri ile etkilenmez.

Ile bir eleman position: static; Herhangi özel bir şekilde konumlandırılmış değildir; her zaman sayfanın normal akışa göre konumlandırılmış:

Bu <div> elemanı vardır position: static;

İşte kullanılan CSS geçerli:

Örnek

div.static {
    position: static;
    border: 3px solid #73AD21;
}
Kendin dene "

position: relative;

Ile bir eleman position: relative; normal pozisyonuna göre konumlandırılır.

nispeten konuma elemanının üst, sağ, alt ve sol özelliklerini ayarlama uzak normal konumundan ayarlanabilir neden olur. Diğer içerik elemanı tarafından bırakılan herhangi bir boşluğa sığacak şekilde ayarlanır edilmeyecektir.

Bu <div> elemanı vardır position: relative;

İşte kullanılan CSS geçerli:

Örnek

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
Kendin dene "

position: fixed;

Ile bir eleman position: fixed; hep demektir sayfa kaydırılan bile aynı yerde kalır viewport, göreli konumlandırılmış. üst, sağ, alt ve sol özellikler elemanı konumlandırmak için kullanılır.

Bir sabit eleman normalde bulunan olurdu sayfasında bir boşluğu bırakmaz.

Sayfanın sağ alt köşesinde sabit eleman dikkat edin. İşte kullanılan CSS geçerli:

Örnek

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
Kendin dene "
Bu <div> elemanı vardır position: fixed;

position: absolute;

Ile bir eleman position: absolute; En yakın konumlandırılmış bir atadan göre konumlandırılır (instead of positioned relative to the viewport, like fixed) .

Ancak; mutlak konumlandırılmış eleman bir konuma ataları varsa, bu belge gövde kullanır ve sayfa kaydırma ile birlikte hareket eder.

Not: Bir "positioned" elemanı, pozisyon dışında herhangi bir şey olandır static .

İşte basit bir örnek:

Bu <div> elemanı pozisyonu vardır: bağıl;
Bu <div> elemanı vardır position: absolute;

İşte kullanılan CSS geçerli:

Örnek

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
Kendin dene "

Çakışan Elemanları

elemanları yerleştirilmiştir, bunlar diğer elemanları üzerine binecektir.

z-index özelliği, bir elemanın istif sırasını belirtir (which element should be placed in front of, or behind, the others) .

Bir eleman, bir pozitif ya da negatif bir yığın sırasını sahip olabilir:

Bu bir başlık

Resim -1 z indeks içerdiğinden, bu metnin arkasına yerleştirilecektir.

Örnek

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
Kendin dene "

daha yığın düzenine sahip bir eleman bir alt yığın düzenine sahip bir elemanın önünde her zaman açıktır.

Not: iki yerleştirilmiş elemanlar olmadan çakışırsa z-index belirtilen üst gösterilir HTML kodu son konuma elemanı.


Bir Görüntü olarak Konumlandırma Metin

bir resmin üzerine metni konumlandırmak için:

Örnek

Norveç
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Kendin dene:

Sol Üst » Sağ Üst» Alt Sol » Sağ Alt» Merkezli »

Örnekler

Diğer Örnekler

Bir elemanın şekli ayarlama
Bu örnek, bir elemanın şeklini ayarlama gösterilmiştir. elemanın, bu şekil kırpılır ve görüntülenir.

Kaydırma kullanarak bir elemanda taşma göstermek için nasıl
Bu örnek, bir elemanın içeriği belirli bir alana sığmayacak kadar büyük olduğu zaman bir kaydırma çubuğu oluşturmak için taşma özelliği ayarlama gösterilmiştir.

Otomatik taşması işlemek için tarayıcıyı nasıl ayarlanır
Bu örnek otomatik taşması işlemek için tarayıcıyı nasıl belirleneceği gösterilmektedir.

imleci değiştirme
Bu örnek imleci değiştirmek gösterilmiştir.


Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »


Tüm CSS Konumlandırma Özellikleri

özellik Açıklama
bottom yerleştirilmiş bir kutunun alt kenar kenara ayarlar
clip Klipler kesinlikle konumlandırılmış eleman
cursor imlecin tipi görüntülenecek belirtir
left yerleştirilmiş bir kutusu için sol kenar kenar ayarlar
overflow İçerik bir elemanın kutusunu taşıyor ne olacağını belirtir
overflow-x o elemanın içeriği alanı aşarsa içeriğin sol / sağ kenarları ne yapılacağını belirtir
overflow-y o elemanın içeriği alanı aşarsa içeriğin üst / alt kenarları ne yapılacağını belirtir
position bir eleman için konumlandırma türünü belirtir
right yerleştirilmiş bir kutusu için sağ kenar kenar ayarlar
top yerleştirilmiş bir kutunun üst kenar kenar ayarlar
z-index Bir elemanın yığın sırasını ayarlar