文章目錄
1、相對定位
1.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相對定位</title>
<style type="text/css">.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
left: 150px;
top:200px;
}
/*
定位：
将指定的元素放到指定的位置
通過position屬性來設定元素的定位
可選值：
static:預設值，元素沒有開啟定位
relative:相對定位 1、 相對的是自身的位置 2、相對位置的元素不會脫離文檔流。
3、移動前的位置還會保留 4、會讓元素提高一個層級，會遮蓋另外一進制素
absolute：絕對定位
fixed:固定定位
可通過left right top bottom 四個屬性設定元素的偏移量
*/
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}</style>
</head>
<body>
<!-- div.box$*3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.2 測試結果
HTML+CSS基礎知識（5）相對定位、絕對定位、固定定位 2、絕對定位
2.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>絕對定位</title>
<style type="text/css">.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
/* 絕對定位：
1、會讓元素脫離文檔流
2、如果不設定偏移量，元素的位置不發生變化
3、相對于離他最近的開啟了定位的祖先元素進行定位的。
如果所有的祖先元素都沒有開啟定位，則會相對于浏覽器視窗進行定位
4、提升一個層級
5、改變元素的性質，行内元素變成塊元素，塊元素的高度和寬度都被内容打開
*/
position: absolute;
left: 400px;
}
.box3{
width: 400px;
height: 400px;
background-color: yellow;
position: relative;
}
.box4{
width: 200px;
height: 200px;
background-color: plum;
position: absolute;
top: 50px;
left: 50px;
}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
2.2 測試
3、固定定位
3.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
/*
固定定位：
也是一種絕對定位，大部分特點和絕對定位一樣
不同的是：
固定定位永遠都會相對于浏覽器視窗進行定位
固定定位會固定在浏覽器視窗某個位置，不會随滾動條滾動
*/
position: fixed;
left:0px;
top:0px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}</style>
</head>
<body>
<!-- div.box$*3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.2 測試結果
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)