定位
-
Position-設(shè)置定位方式 -
top,right,bottom,left,z-index--設(shè)置位置
top right bottom left
image
元素邊緣距參照物的邊緣的距離
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>位置</title>
<style>
.sample{background-color: pink;}
.sample{position: absolute;}
/*.sample{top: 30px;left: 30px;}*/ 注釋掉以后會距上邊30px 距左邊30px
/*.sample{bottom: 30px;right: 30px;}*/注釋掉以后div會被撐開
</style>
</head>
<body>
<div class="sample">sample</div>
</body>
</html>
z-index
image
z軸上的排序:默認(rèn)為z-index:0; 正值越大,在z軸上越在上面,在下面的會被覆蓋.
z-index:-value;值可為負(fù)值
是不是值越大約在上面呢?不一定
z-index棧
image
上圖有兩個定位元素,如果給z-index:1;元素這個定位,父元素設(shè)為z-index:9; z-index:100;的元素的祖先元素設(shè)為z-index:1; z-index紅色元素蓋在了綠色元素上
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.sample0, .sample1{position: absolute;width: 200px;line-height: 150px;text-align: center;}
.sample0{background-color: #ff0;}
.sample1{background-color: pink;}
.sample1{top: 100px;left: 100px;}正常情況下的排列是按照元素在文檔流中的位置排的
/*.sample0{z-index: 9;}*/ 會在上面
/*.container0, .container1{position: relative;}*/
/*.container1{z-index: 99;}*/
</style>
</head>
<body>
<div class="container0"><div class="sample0">sample 0</div></div>
<div class="container1"><div class="sample1">sample 1</div></div>
</body>
</html>
position
position: static | relative | absolute | fixed
position:relative
- 仍在文檔流中
- 參照物為元素本身
- 可以改變z軸上的層級
- 使用場景:絕對定位元素的參照物
image
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style>
.container{width: 400px;line-height: 2;border: 1px dashed #aaa;}
.sample{background-color: pink;}
.sample{position: relative;}
.sample{top: 10px;left: 30px;}
</style>
</head>
<body>
<div class="container">
<div>相對定位元素的前序元素</div>
<div class="sample">sample</div>
<div>相對定位元素的后序元素</div>
</div>
</body>
</html>
position:absolute
- 默認(rèn)寬度為內(nèi)容寬度
- 脫離文檔流(浮起來了)
- 參照物為第一個定位祖先/根元素
- 使用場景:
輪播頭圖
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
.container{width: 300px;margin: 50px;line-height: 2;border: 1px dashed #aaa;}
.sample{background-color: pink;}
/*.sample{position: absolute;}*/
/*.sample{bottom: 10px;left: -30px;}*/
/*.container{position: relative;}*/
</style>
</head>
<body>
<div class="container">
<div>絕對定位元素的前序元素</div>
<div class="sample">sample</div>
<div>絕對定位元素的后序元素</div>
</div>
</body>
</html>
position:fixed(固定定位)
- 默認(rèn)寬度為內(nèi)容寬度
- 脫離文檔流
- 參照物為視窗
- 使用場景:
固定頂欄遮罩
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed定位</title>
<style>
.container{width: 400px;margin: 200px;line-height: 2;border: 1px dashed #aaa;}
.sample{background-color: pink;}
/*.sample{position: fixed;}*/ 脫離文檔流
/*.sample{bottom: 0;left: 10px;}*/ 相對于視窗定位
/*.container{height: 1000px;} */
</style>
</head>
<body>
<div class="container">
<div>絕對定位元素的前序元素</div>
<div class="sample">sample</div>
<div>絕對定位元素的后序元素</div>
</div>
</body>
</html>
遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遮罩</title>
<style>
.mask{
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
}
.content{
height: 3000px;
}
</style>
</head>
<body>
<div class="mask"></div>
<div class="content">content area</div>
</body>
</html>
固定頂欄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定頂欄</title>
<style>
body{margin: 0;line-height: 1.8;}
.top{background-color: pink;color: #fff;}
.main{height: 3000px;background-color: #eee;}
body{padding-top: 50px;}
.top{position: fixed;top: 0;width: 100%;height: 50px;}
</style>
</head>
<body>
<div class="top">top bar</div>
<div class="main">main content area</div>
</body>
</html>
使用定位怎么做布局?看個DEMO
三行自適應(yīng)布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三行自適應(yīng)布局</title>
<style>
.head{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ccc;
}
.body{
position: absolute;
top: 100px;
left: 0;
bottom: 100px;
right: 0;
overflow: auto;
}
.content{
height: 2000px;
}
.foot{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="body">
<div class="content">content area</div>
</div>
<div class="foot">foot</div>
</body>
</html>
