CSS定位实例,嵌套的DIV



CSS定位实例,嵌套的DIV一个嵌套的DIV,用CSS定位知识实现,你可以此为例好好理解一下 absolute定位的用法。

<!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>
<title>Absolute positioning</title>
<style>
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 300px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
</style>
</head>
<body>
<div id=”box1″>This is box one. It is positioned 100 pixels from the top and 100 pixels from the left of the viewport
<div id=”box2″>This is box two. It is positioned 2 em from the bottom and 2 em from the right of the parent element – box1</div>
</div>
</body>
</html>

http://www.codefans.net/jscss/code/2502.shtml