CSS Dersleri #21 - Position Absolute, Relative, Sticky, Fixed Kullanımı
HTML-код
- Опубликовано: 6 фев 2021
- Bu dersimizde CSS Position Relative, Position Absolute ve Z-index gibi konuları öğreneceğiz.
#WebProgramlama derslerimizin devamı olan Başlangıçtan İleri Seviyeye #CSS Dersleri ile #HTML kodlarınızı daha şık bir hale dönüştürecek ve göz alıcı web siteleri oluşturabileceksiniz.
Kodlama Vakti Kanalına Hoşgeldiniz !
Abone Olmayı Unutmayın🔔
► Abone Ol : / @kodlamavakti
► Ders Linki : kodlamavakti.com/css/position/
► CSS Dersleri : kodlamavakti.com/css/
► Sıfırdan İleri Seviyeye HTML Dersleri : • HTML Dersleri - Sıfırd...
► 2 Saatte CSS Öğrenin ! : • 2 Saatte CSS Öğrenin !...
www.kodlamavakti.com
Kodlama Vakti ekibi olarak , programlamanın herkes tarafından öğrenilebilir olduğunu takipçilerimize benimsetmek olup , kanalımızda ki eğitimler özenle hazırlanmaktadır ve tamamen ücretsizdir! Vakit Kodlama Vaktidir !
Eğitimlerimizin size yararlı olduğunu düşünüyor ve beğeniyorsanız videoyu beğenmeyi , kanalımıza abone olmayı unutmayın.
CSS'de "position" özelliği, bir etiket için kullanılan konumlandırma yönteminin türünü belirtir.
Beş farklı position değeri vardır:
absolute
fixed
static
relative
sticky
Bu pozisyonlar kullandıktan sonra, etiketler top, bottom, left ve right özellikleri kullanılarak konumlandırılır. Ancak, önce position özelliği ayarlanmadıkça bu özellikler çalışmayacaktır. Ayrıca position değerine bağlı olarak farklı şekilde çalışırlar.
position static kullanımı
HTML öğeleri varsayılan olarak statik konumlandırılmıştır.Statik konumlandırılmış etiketler, top, bottom, left ve right özelliklerden etkilenmez.Statik etiketler herhangi bir özel şekilde konumlandırılmamıştır ve her zaman sayfanın normal akışına göre konumlandırılırlar.
position relative kullanımı
CSS'de "position:relative" özelliği, normal konumuna göre konumlandırılmıştır.Relative olarak konumlandırılmış bir etiketin top, bottom, left ve right özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olacaktır. Diğer blok etiketleri, etiketin bıraktığı herhangi bir boşluğa sığacak şekilde ayarlanmayacaktır.
position fixed kullanımı
CSS'de "position:fixed" özelliğine sahip etiket, görüntü alanına göre konumlandırılmıştır, yani sayfa kaydırılmış olsa bile her zaman aynı yerde kalır. top, bottom, left ve right gibi özellikler, öğeyi konumlandırmak için kullanılır.
Sabit (Fixed) bir etiket, sayfada normalde bulunduğu yerde boşluk bırakmaz.
position absolute kullanımı
CSS'de "position:absolute" özelliğine sahip bir etiket, en yakın konumlandırılmış ata etikete göre konumlandırılır (fixed gibi, görüntü alanına göre konumlandırılmaz).
Ancak; absolute konumlandırılmış bir öğenin konumlandırılmış üst etiketi yoksa, body etiketine göre kullanılır ve sayfa kaydırmayla birlikte hareket eder.
Not: "Konumlandırılmış" bir etiket, konumu statik dışında herhangi bir şey olan bir öğedir.
position sticky kullanımı
CSS'de "positiion:sticky" özelliğine sahip bir etiket: kullanıcının kaydırma çubuğu konumuna göre konumlandırılır. Sticky bir etiket, kaydırma konumuna bağlı olarak relative ve fixed arasında geçiş yapar. Görüntü alanında belirli bir ofset konumu karşılanıncaya kadar "relative" olarak konumlandırılır - daha sonra yerine "fixed" olarak devam eder.
Çakışan (Overlapping) Etiketler
Öğeler konumlandırıldığında, diğer öğelerle çakışabilirler. CSS'te "z-index" özelliği, bir öğenin gözükme sırasını belirtir (hangi öğenin diğerlerinin önüne veya arkasına yerleştirilmesi gerekir).
Bir öğe, pozitif veya negatif bir indis sırasına sahip olabilir:
Daha büyük indis sırasına sahip bir öğe, her zaman daha düşük indis sırasına sahip bir öğenin önündedir. Konumlandırılmış iki öğe bir z-index belirtilmeden çakışırsa, HTML kodunda en son konumlandırılan etiket en üstte gösterilir.
css konusunu araştırırken sizin anlatımlarınıza denk geliyorum ve konuyu tamamen anlamış oluyorum.Teşekkür ederim emeğinize sağlık..
Daha iyi türkçe bir kaynak yok, anlatım cok iyi, lütfen müsait oldugunuz zamanlarda bilginizi aktarmaya devam edin, teşekkürler.
Çok kısa zamanda tekrardan içeriklerimizi yayınlamaya başlayacağız beklemede kalın :)
Abi iki gündür aradığımı burada buldum çok teşekkür ederim.
css bitirdim anlamadigim tek konuydu helal olsun valla hic bir kaynakta boyle bir aciklama yok ne yabanci ne turkce kaynaklar yotubeda ilk defa yorum yaziyorum o derece gurur duydum!
Hocam emeğinize sağlık çok faydalı bir içerik
mükemmel gerçekten. her şeyi mükemmek anladım. Azerbaycandan selamlar.
Bu konuyu anlamamıştım ama şimdi anladım hocam muhteşem anlatmışsınız
Çok teşekkür ederim hocam. Çok faydalı ve anlaşılır bir içerik. Emeğinize sağlık.
Başka bi kanalda öyrendim bazı şeyler karnlık kaldı positionlarda.Burdan izledim bi çok şeyler aydınlandı fakat çok az bazı şeyler kaldı, onuda araştırıcam.Çok sağolun hocam Allah razı olsun sizden.Minnetdarım
çok teşekkür ederim hocam sizin sayenizde öğrendim kafamı çok karıştırıyordu bu mesele
Bütün izlediklerimi bir kenara bıraktım sadece sizi takip ediyorum. Emeğinize sağlık...
Hocam ağzınıza salık. Tam anlamıyla aydınlandım. Daha iyi bir videoya rastlamadım. Süper !
ilk defa böyle bir anlatım duydum. Bu sefer anladım :)
Emegine saglik kardesim.Allah razi olsun.
tertemiz anlatmissiniz tesekkurler
Emeginize saglik.
tesekkürler!
Çok teşekkür ederim.
Teşekkürler bilgi için 🙏🙏
çok güzel anlatım ağzınıza sağlık
Ağzınıza sağlık
Hocam çok sağ olun, gerçekten güzel anlatmışsınız. Kanalı yeni keşfettim. Umarım yeni videolar yayınlarsınız.
Yeni videolarımız yolda geliyor :)
ela izah edir Azerbaycanda salamlar
✅
hocam salağa anlatır gibi anlattığınız için çok teşekkürler çok iyi anladım emeklerinize sağlık :D
Bu kadar basit bir konuyu detaylarıyla anlatan sizin dışınızda kimse yok. Bir sticky konusu anlatırken ekranda relative ekranın dışına çıkıldığında fixed gibi davranır demek zor geliyor herhalde diğer eğitimci arkadaşlara. Resmen saçma sapan birkaç detay vermedikleri için bir günümü yediler.
güzel bir anlatım. teşekkürler. pozitif bir iyileştirme yapmam gerekirse ingilizce telaffuzlar doğru değil. okunuşlar: rileytiv değil relativ, mörcin değil, marcin şeklinde olmalı.
hocam bende mi sıkıntı bilmiyorum ama container'ı relative yaptım kutu2 'yi de absolite yaptım ama benim container dışına çıktı nasıl olabilir sizce bu?
güzel anlatım lakin biraz daha hızlı konuşsan çok iyi olur. çalma hızını 1.25 almak zorunda kaldım. lütfen biraz daha hızlı anlatım!
hocam margin'in telaffuzu mörcin değil marcin şeklinde oluyor.
relative ise relatif şeklinde telaffuz ediliyor rıleytiv değil.
Peki fixed yukaradan aşağıya , inerken 50 px sonra sabitlense olmaz mı ? Bunu nasıl yaparız ?
İrelileme kat ede bildiniz mi
@@itisAydan Evet yapabildim. Ama Anlatnası uzun. Aslında sadece alt alta 3 satır yazılıyor. Ama anlatması uzun.
@@oguzkaganhan2630 ben bitek bunu demiyorum,proqramlamada seviye atladın mı diyorum
@@itisAydan Hayır, Frontenti bıraktım. Test Analiz öğreniyorum. UX tarafındayım artık.
@@oguzkaganhan2630 javascript için önereceğeniz ücretsiz ve ya ücretli en iyi kaynak hangisi yani biliyorsanız tabi