<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
/*
1.元素設置position:absolute後，元素脫離文檔流
2.元素設置position:absolute後，元素具有float的特性
3.元素設置position:absolute後，元素以最近的已設置position屬性的父級元素爲基準進行偏移；如沒有符合條件的父級元素，則以默認“可視”文檔爲基準→→<span style="font-family: Arial, Helvetica, sans-serif;">不跟隨滾動條移動。</span>
4.層級用z-index:[number]設置，數字越大，優先級越高。同時設置position的元素，後者比前者的優先級高、設置層級的元素比沒設置層級的元素優先級高
*/
.wrap{height: 300px;background: gray;position: relative;}
.box1{width: 300px;height: 100px;background: red;position: absolute;bottom: 0;right: 0;z-index: 1;/*z-index: 4;*/}
span.box2{width: 400px;height: 100px;background: green;position: absolute;bottom: 30px;right: 10px;z-index: 2;}
.box3{width: 200px;height: 200px;background: blue;}
.box4{width: 400px;height: 50px;background: yellow;position: relative;left:800px;top: 40px;z-index:1 }
</style>
</head>
<body>
<div class="wrap">
<div class="box1">box1</div>
<span class="box2">span.box2</span>
<div class="box3">box3</div>
<div class="box4">box4</div>
</div>
</body>
</html>
![]()
