一、定位的介绍
定位有三种：相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)
二、三种定位的用法，特点和实例
2.1、相对定位 特性：不脱标、形影分离、老家留坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px; }
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
/*top: 50px;*/
left: 300px;
}
.box3{
background-color: blue;
} </style>
</head>
<body> <!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑
所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果--> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> </body>
</html>
相对定位的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
/*清除默认样式*/
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 10px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li.xiaoming{
position: relative;
top: 40px;
left: 30px;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<ul>
<li>
<a href="">网站导航1</a>
</li>
<li class="xiaoming">
<a href="">网站导航2</a>
</li>
<li>
<a href="">网站导航3</a>
</li>
<li>
<a href="">网站导航4</a>
</li>
<li>
<a href="">网站导航5</a>
</li>
<li>
<a href="">网站导航6</a>
</li>
</ul>
</div>
</body>
</html> <!-- 因为相对定位有坑，占着茅房不拉屎，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用：
1.微调元素位置
2.做绝对定位的参考（父相子绝） 讲绝对定位会讲 --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
.btn{
position: relative;
top: 3px;
left: -5px;
} </style>
</head>
<body>
<!-- 微调我们元素位置--> <div> <input type="text" name="username" class="user">
<input type="button" name="" value="点我" class="btn">
</div> </body>
</html>
相对定位的用途
2.2、绝对定位 特性：脱标、做遮盖效果，提升了层级、设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red; /*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/
position: absolute;
}
.box2{
background-color: green; }
.box3{
background-color: blue;
}
span{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span> </body>
</html>
绝对定位的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
height: 2000px;
border: 10px solid green;
} .box{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位参考点：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/
position: absolute;
top: 100px;
/*bottom: 100px;*/
left: 18px;
}
</style>
</head>
<body>
<div class="box"> </div> </body>
</html>
绝对定位参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position: relative; } .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
} /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/ </style>
</head>
<body>
<div class="box"> <div class="box2">
<p></p>
</div>
</div> </body>
</html>
绝对定位以盒子作为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: absolute;
padding: 50px;
} .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 10px;
left: 20px;
} </style>
</head>
<body> <!-- 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。 注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。 -->
<div class="box"> <p></p> </div> </body>
</html>
绝对定位以父辈盒子做参考点2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px;
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 10px;
left: 40px;
}
</style>
</head>
<body>
<div class="father">
<p></p>
</div> </body>
</html>
绝对定位的盒子无视父辈的padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
} </style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div> </body>
</html>
绝对定位盒子居中
2.3、固定定位 特性：脱标、遮盖，提成层级、固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
/*固定定位：固定当前的元素不会随着页面滚动而滚动，
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点 作用： 1.返回顶部栏 2.固定导航栏 3.小广告 */
position: fixed;
bottom: 30px;
right: 40px;
}
</style>
</head>
<body> <div>
<p></p>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </div>
</body>
</html>
固定定位特性和应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*给body设置导航栏的高度，来显示下方图片的整个内容*/
padding-top: 49px;
}
.wrap{
width: 100%;
height: 49px;
background-color: #000;
/*设置固定定位之后，一定一定要加top属性和left属性*/
position: fixed;
top: 0;
left: 0; }
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto; }
.wrap .nav ul li{
float: left;
width: 160px;
height: 49px; text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "Hanzipen SC";
background-color: purple;
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
} </style>
</head>
<body>
<div class="wrap">
<div class="nav">
<ul>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
</ul>
</div>
</div>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </body>
</html>
固定定位_固定导航栏
三、父相子绝
当父盒子设定为相对定位，子盒子绝对定位的参考点是父盒子的左上角。如果父盒子设定为绝对定位或者固定定位，子盒子同样是以父盒子的左上角做参考点，但是那样，父盒子就脱离标准流，没什么意义。所以一般情况下，都是要遵从“父相子绝”的原则。附一个父相子绝的案例，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position: relative; } .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
} /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/ </style>
</head>
<body>
<div class="box"> <div class="box2">
<p></p>
</div>
</div> </body>
</html>