CSS定位的使用詳細教程及層塊順序實例

在設計HTML頁面的時辰有時辰會用到相對定位和感覺定位來設計網頁，使得移動某個元素或者重疊兩個區塊的結果而不粉碎其他的元素，在這里我就用現實的例子來申明相對定位和絕對定位。

東西/原料

CSS根本常識
HTML根本常識

方式/步調

1
為了申明問題，起首我們來做一個未處置的根基的網頁來對比，新建一個紅色的div和一段文字，具體代碼如下：
<html>
<head>
<title>相對定位和絕對定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;

}
</style>
</head>
<body>
<div class="div1"></div>
<p>我愛HTML，我愛CSS</p>
</body>
</html>
可以看到，下圖中一個紅色布景的區塊下面右一段文字。
2
我們可以利用相對定位來設置元素的位置，相對位置是以區塊基準點為左上角來設置的，在這里就用現實的例子來申明，具體代碼如下，
<html>
<head>
<title>相對定位和絕對定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:relative;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我愛HTML，我愛CSS</p>
</body>
</html>
如下圖，只有我們區塊的位置改變了其他的都沒有變，如許點竄不影響其他結構。
3
說了相對位置設置相對于區塊的左上角極點改變了top和left還可以設置相對極點right和bottom的值，具體代碼如下：
<html>
<head>
<title>相對定位和絕對定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:relative;
right:25px;
bottom:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我愛HTML，我愛CSS</p>
</body>
</html>
如下圖，是不是可以看到相對于區塊的基點的右邊和下邊的位置改變了，使得區塊標的目的左和標的目的上移動了。
4
除了相對定位還有絕對定位，這里就利用絕對定位來設置相對于right和bottom來設置，絕對定位是相對于網頁可視化為基準點來說的，具體代碼如下：
<html>
<head>
<title>相對定位和絕對定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:absolute;
right:25px;
bottom:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我愛HTML，我愛CSS</p>
</body>
</html>
可以看到，執行的結果是圖片在網頁的最下角相對于右邊和底部做了25像素的位移。
5
這里來說說絕對定位相對于
<html>
<head>
<title>相對定位和絕對定位</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
position:absolute;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<p>我愛HTML，我愛CSS</p>
</body>
</html>
相對于網頁的定位，其他頁面的結構不影響，而且不占用網頁的區域。
6
最后我們來說說區塊層的挨次，這里來說說若何設置重疊字來申明結果，具體代碼如下：
<html>
<head>
<title>重疊字</title>
<style>
div{
font-size:50px;
font-family:arial black;
}
.div1{
color:red;
position:absolute;
top:20px;
left:20px;
z-index:3;
}
.div2
{
color:blue;
position:absolute;
top:23px;
left:23px;
z-index:2;
}
.div3{
color:#666666;
position:absolute;
top:26px;
left:26px;
z-index:1;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛</div>
<div class="div2">我愛HTML，我愛</div>
<div class="div3">我愛HTML，我愛</div>
</body>
</html>
可以看到層疊文字的結果，這里用到了Z-index來調節顯示的層數。