Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Absolute Konumlandırma Problemi
#1
CSS ile bir elemanı  sayfa içinde özel bir konumda absolute konumlandırma yaparken bazı sorunlar yaşarız. Elemanın kesinlikle belirlediğimiz bir konumda olması için position özelliğini absolute olarak belirlediğimizde top, left right veya bottom değerlerini verdiğinizde birden elemanı sayfanın en absürt yerinde size el sallarken bulursunuz. Bu hiç istemediğiniz bir durum. Aşağıda absolute konumlandırma örneği bulunmakta.
Kod:
<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Konumlandırma Problemi</title>
<style>
.kutu{
width:450px;
height:250px;
background-color:#08cbb6;
margin-left:25px;
}
.ickutu{
width:150px;
height:150px;
background-color:#5fcb08;
position:absolute;
top:10px;
left:20px;
}
</style>
</head>
<body>

<h1>CSS Absolute konumlandırma Problemi</h1>
<span>Dış Kutu</span>
<div class="kutu">
<div class="ickutu">İç Kutu</div>
</div>

</body>
</html>
Bu kodu çalıştırdığınızda şöyle bir sonuçlar karşılaşırsınız.
[Resim: css-absolute-konumlandirma.jpg]

Bu sorunu çözmek için absolute konumlandırma verdiğimiz elemanın atasına ayni içinde olduğu elemanın CSS değerine position:relative; kodunu eklememiz yeterli.

CSS Absolute Konumlandırma Sorunu ve Çözümü
Kod:
<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Konumlandırma Problemi</title>
<style>
.kutu{
width:450px;
height:250px;
background-color:#08cbb6;
margin-left:25px;
position:relative;
}
.ickutu{
width:150px;
height:150px;
background-color:#5fcb08;
position:absolute;
top:10px;
left:20px;
}
</style>
</head>
<body>

<h1>CSS Absolute konumlandırma Problemi</h1>
<span>Dış Kutu</span>
<div class="kutu">
<div class="ickutu">İç Kutu</div>
</div>

</body>
</html>
Bu durumda istediğimiz sonuca ulaşırız.

[Resim: css-absolute-konumlandirma-cozum.jpg]
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi