Web tasarım ve programlama dersinde kutu modeli içerisinde nesnelere sabit pozisyon kullanımı.

Css ile position: fixed kullanımı

Css kutu modeli içerisinde tanımlanan resme sabit konumlandırma özelliği ekleyip, altına tarayıca kaydırma çubuğu çıkana kadar paragraf özelliğinde metin eklemesi yapalım. Kaydırma çubuğu yeterince küçülene kadar paragraf eklemesi yapalım.

Daha sonra aşağıda verilen html kodlarını yazınız.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <div class="kutu">
     <img src="paris.jpg">
    <div class="paragraf">
    <p>2.5. Konumlandırma Bu kısımda bir ögenin sayfadaki konumunu belirlemeyi, ögelerin üst üste çakıştığı durumlarda hangisinin üste hangisinin alta geleceğini belirlemeyi öğreneceğiz.</p>
    .
    .
    .   
   <p>2.5. Konumlandırma Bu kısımda bir ögenin sayfadaki konumunu belirlemeyi, ögelerin üst üste çakıştığı durumlarda hangisinin üste hangisinin alta geleceğini belirlemeyi öğreneceğiz.</p>
</div>
</div>
</body>
</html>

Css kodlarını yazarak html sayfasının position:fixed özelliği almasını sağlayalım.

.kutu {
 margin: 20px auto;
 border: 1px solid #000;
 padding: 20px;
 width: 800px;   }
img {
 position: fixed;
 left:43%; 
 width: 250px;
 height: 250px;   }
.paragraf { margin-top:300px; }
  • Yazı Etiketleri :
  • position:fixed
  • sabit konumlandırma
İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile web sayfası tasarımı örneği yapımı
Yazıyı Oku

Css ile web sayfası tasarımı örneği yapımı

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Menu