div 上浮div

<!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=gb2312" />
<title>绝对定位相对定位</title>
<style>
* { margin: 0; padding: 0; }
.fj1 { width: 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; }
.zj1, .zj2 { width: 50px; height: 50px; position: absolute; right: -20px; top: 20px; border: 1px solid #F00; background: #FFF; z-index: 3 }
.zj2 { right: -50px; top: 40px; z-index: 4; background: #903; border: 1px solid #093; }
</style>
</head>

<body>

<div class="fj1"> 我在下面
<div class="zj1">我浮动在上面</div>
<div class="zj2">我浮动最上面</div>
</div>
</body>
</html>

posted @ 2015-07-27 11:41  蚂蚁的天空  阅读(1923)  评论(1编辑  收藏  举报