css的三種定位relative,absolate, fixed,相對定位，絕對定位，固定定位，巢狀定位
阿新 • • 發佈：2019-01-03
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>網頁布模型的學習</title>
<!--網頁佈局模型有三種：流動模型，浮動模型，層模型-->
<!--層模型的三種定位
1、絕對定位：position:absolute
2、相對定位：position:relative
3、固定定位：position:fixed
-->
<style>
.box1 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: absolute;
/*絕對定位就是移動的距離以畫布為參照*/
left: 10px;
}
.box2 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
/*相對定位就是移動的距離以原來位置為參照*/
left: 100px;
}
.box3 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: fixed;
/*固定定位就是以視窗為基準的定位，就是你滑動視窗，不會動*/
right: 0;
}
/*使box5相對於box4而定位*/
.box4 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: relative;
}
.box5 {
border: 3px solid red;
/*solid實線，dashed虛線*/
width: 30px;
height: 30px;
position: absolute;
left: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="{CHARSET}">
<title>網頁布模型的學習</title>
<!--網頁佈局模型有三種：流動模型，浮動模型，層模型-->
<!--層模型的三種定位
1、絕對定位：position:absolute
2、相對定位：position:relative
3、固定定位：position:fixed
-->
<style>
.box1 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: absolute;
/*絕對定位就是移動的距離以畫布為參照*/
left: 10px;
}
.box2 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
/*相對定位就是移動的距離以原來位置為參照*/
left: 100px;
}
.box3 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: fixed;
/*固定定位就是以視窗為基準的定位，就是你滑動視窗，不會動*/
right: 0;
}
/*使box5相對於box4而定位*/
.box4 {
border: 3px solid #000;
/*solid實線，dashed虛線*/
width: 100px;
height: 100px;
position: relative;
}
.box5 {
border: 3px solid red;
/*solid實線，dashed虛線*/
width: 30px;
height: 30px;
position: absolute;
left: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>