Untuk mengatur posisi objek terhadap objek lainnya dalam CSS dapat memanfaatkan properti Position. Dimana Position Property mempunyai value Static, Absolute, Relative dan Fixed. Jika bernilai static maka objek tidak akan terpengaruh penempatan dari left, top, right dan bottom, objek kedua akan ditempatkan setelah objek pertama, dst. Sementara bila bernilai absolute maka objek terpengaruh penempatan jarak dari left, top, right dan bottom yang ditetapkan. Sedangkan jika bernilai relative maka berlaku aturan yang ditetapkan sembari menyesuaikan dengan kondisi objek lainnya. Lalu bagaimana dengan nilai fixed? Untuk nilai fixed maka berlaku aturan yang sudah ditetapkan dan posisinya tetap sekalipun browser discroll. Untuk lebih lengkapnya pelajari di bawah ini:
Position dengan nilai static, objek akan ditempatkan secara default, tidak terpengaruh jarak penempatan dari left atau top, objek pertama ditempatkan di awal dan objek kedua serta berikutnya ditempatkan setelahnya. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Position Static</title>
<Style>
.layer1{
border:1px solid;
width:455px;
height:200px;
position:static;
left:30px;
top:30px;
}
.layer2{
border:1px solid;
width:455px;
height:200px;
position:static;
left:30px;
top:30px;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
<p>Keterangan :<br>
Layer 1 berada di atas dan layer 2 berada di bawahnya, dan tidak terpengaruh oleh jarak posisi left dan top yang ditetapkan.</p>
</body>
</html>
Position dengan nilai absolute, objek akan ditempatkan sesuai dengan aturan yang berlaku untuk objek tersebut, terpengaruh oleh jarak dari left dan top yang ditetapkan. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Position absolute</title>
<Style>
.layer1{
border:1px solid;
width:455px;
height:200px;
position:absolute;
left:30px;
top:30px;
}
.layer2{
border:1px solid;
width:455px;
height:200px;
position:absolute;
left:30px;
top:30px;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
<p>
Keterangan :<br>
Layer 1 dan layer 2 saling bertumpuk karena memiliki property dan nilai yang sama yang mengikuti jarak posisi yang ditetapkan yaitu dari left dan top sebesar 30px.
</p>
</body>
</html>
Position dengan nilai relative, objek akan ditempatkan sesuai dengan aturan yang berlaku untuk objek tersebut, terpengaruh oleh jarak dari left dan top yang ditetapkan, tapi menyesuaikan dengan kondisi objek lainnya. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Position relative</title>
<Style>
.layer1{
border:1px solid;
width:455px;
height:200px;
position:relative;
left:30px;
top:30px;
}
.layer2{
border:1px solid;
width:455px;
height:200px;
position:relative;
left:30px;
top:30px;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
<p>
Keterangan :<br>
Layer 1 ditempatkan sesuai jarak posisi yang ditempatkan dari left dan top sebesar 30px, begitupun dengan layer 2 tapi posisinya menyesuaikan dengan layer 1 sehingga berada di bawah layer 1.
</p>
</body>
</html>
Position dengan nilai fixed, objek akan ditempatkan sesuai dengan aturan yang berlaku untuk objek tersebut, terpengaruh oleh jarak dari left dan top yang ditetapkan dan posisinya tetap walaupun browser discroll. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Position fixed</title>
<Style>
.layer1{
border:1px solid;
width:455px;
height:200px;
position:fixed;
left:30px;
top:30px;
}
.layer2{
border:1px solid;
width:455px;
height:200px;
position:fixed;
left:30px;
top:30px;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
</body>
</html>
Demikian tutorial singkat tentang pengaturan posisi objek dalam CSS yang tentu saja sangat berguna saat mengatur tampilan halaman web.