Dalam CSS suatu objek dapat diatur penempatannya baik itu di sebelah kiri, kanan atau terhadap objek lainnya. Pengaturan penempatan objek dapat memanfaatkan properti Float, Clear dan Z-Index. Dengan properti Float kita dapat leluasa menempatkan objek di sisi tertentu. Kemudian dapat dipadukan dengan properti Clear untuk mengatur apakah suatu objek dapat ditempatkan atau tidak sebelum atau sesudahnya. Sementara Z-Index bermanfaat untuk mengatur susunan layer. Untuk lebih jelasnya dapat mempelajarinya di bawah ini:
Float, untuk menempatkan objek di sisi tertentu objek dengan properti float, dengan nilai left, right, none atau inherit. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Float Style Sheet</title>
<Style>
.layer1{
border:1px solid;
width:100px;
height:200px;
margin-right:5px;
background-color:yellow;
position:relative;
left:30px;
top:30px;
float:left;
}
.layer2{
border:1px solid;
width:300px;
height:200px;
background-color:blue;
position:relative;
left:30px;
top:30px;
float:left;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
</body>
</html>
Clear, objek dengan properti clear tidak akan mengijinkan objek dengan properti float berada pada sisinya sesuai dengan nilai left, right, both, none atau inherit. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Float Style Sheet</title>
<Style>
.layer1{
border:1px solid;
width:100px;
height:200px;
margin-right:5px;
background-color:yellow;
position:relative;
left:30px;
top:30px;
float:left;
}
.layer2{
border:1px solid;
width:300px;
height:200px;
background-color:blue;
position:relative;
left:30px;
top:30px;
float:left;
}
.layer3{
border:1px solid;
width:405px;
height:50px;
background-color:olive;
margin-top:5px;
position:relative;
left:30px;
top:30px;
clear:both;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
<Div class="layer3">Isi paragraf 3</div>
</body>
</html>
Z-index, dapat digunakan membuat efek bayangan (drop shadow), atau untuk mengatur susunan layer pada browser dengan memberi nilai integer dimana semakin besar nilai maka susunan layernya makin ke atas dengan catatan position peperty digunakan. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Float Style Sheet</title>
<Style>
.layer1{
background-color:blue;
border:1px solid;
width:200px;
height:100px;
position:absolute;
Z-index:0;
top:0;
left:0;
font-size:2em;
}
.layer2{
background-color:yellow;
border:1px solid;
width:200px;
height:100px;
position:relative;
Z-index:1;
top:0;
left:0;
font-size:2em;
}
</style>
</head>
<body>
<Div class="layer1">Isi paragraf 1</div>
<Div class="layer2">Isi paragraf 2</div>
</body>
</html>
Demikianlah tutorial singkat tentang properti yang dapat digunakan untuk mengatur penempatan objek saat pengaturan halaman web.