Web tasarım ve programlama dersinde kutu modeli içerisinde nesnelere sabit pozisyon 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; }