定位
-
Position-设置定位方式 -
top,right,bottom,left,z-index--设置位置
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轴上的排序:默认为z-index:0; 正值越大,在z轴上越在上面,在下面的会被覆盖.
z-index:-value;值可为负值
是不是值越大约在上面呢?不一定
z-index栈
image
上图有两个定位元素,如果给z-index:1;元素这个定位,父元素设为z-index:9; z-index:100;的元素的祖先元素设为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
- 默认宽度为内容宽度
- 脱离文档流(浮起来了)
- 参照物为第一个定位祖先/根元素
- 使用场景:
轮播头图
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(固定定位)
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
- 使用场景:
固定顶栏遮罩
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
三行自适应布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三行自适应布局</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>
