Archive for April, 2012
Absolute position in Div boxes
The parent when position: relative forms the container from which the position: absolute divs take their positions. If the parent containing div did not exist or didn’t have position: relative; the position: absolute divs would appear at the top of the screen, taking their positions from the main page container or body of the whole page.
The HTML markup code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.background { background-color: #c0c0c0; padding: 0; color: #335500; }
</style>
</head>
<body>
<div class="background" style="position:relative; float:left; width:138px; height:158px;">
<div style="position:absolute; z-index:2; top:0px; left:0px; width:100%; background-color: pink;">
div satu div satu
</div>
<div style="position:absolute; z-index:1; top:25px; left:0px; height:95px; width:100%; background-color:red;">
posisi images
</div>
<div style="position:absolute; z-index:3; bottom:22px; left:0px; width:100%; background-color: yellow;">
div tiga div tiga div tiga
</div>
<div style="position:absolute; bottom:0px; left:0px; width:100%; background-color: yellow;">
div empat
</div>
</div>
</body>
</html>
note:
parent containing div must have position:relative; then you can apply the position:absolute.
source: http://www.wickham43.net
-
You are currently browsing the archives for April, 2012
Visitor
design, web & css 