CSS|13 position属性
position位置
position表示位置，主要用于实现对元素的定位。
在CSS中定位分为三种：
- position:fixed; 固定定位
- position:relative; 相对定位
- position:absolute; 绝对定位
注意：
在使用定位属性时，一定要配合定位的坐标来使用！
left:表示定位的元素离左边多远
right:表示定位的元素离右边多远
top:表示定位的元素离上边多远
bottom:表示定位的元素离下边多远
固定定位
1.语法：
position:fixed;
固定定位，它是相对于浏览器窗口进行定位。不管页面如何进行定位，固定定位元素显示的位置不会改变！
2.特点：
- 固定定位元素它脱离了标准文档流
- 固定定位元素的层级比校准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面的元素
- 固定定位元素它不再占用空间
- 固定定位元素它显示的位置不会随着浏览器滚动而滚动
案例1：固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 100px;
height: 100px;
background-color: #f00;
/*给p标签增加定位的属性
不加这个之前，p标签被图片遮住了*/
position: fixed;
}
</style>
</head>
<body>
<p></p>
<img src="../../lesson_02/img/IMG_0425.JPG" alt="">
<img src="../../lesson_02/img/IMG_0425.JPG" alt="">
<img src="../../lesson_02/img/IMG_0425.JPG" alt="">
<img src="../../lesson_02/img/IMG_0425.JPG" alt="">
<img src="../../lesson_02/img/IMG_0425.JPG" alt="">
</body>
</html>
position: fixed; 需要配合 top、right、bottom 或 left 属性来指定元素的具体位置，如果没有设置，就默认固定在左上角，
案例2：使用固定定位来实现返回顶部的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用固定定位来实现返回顶部的按钮</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
width: 60px;
height: 60px;
/*将行内元素转换成跨级元素
这样换了之后，a标签中的文本紧密了些
*/
display: block;
background-color: #ccc;
text-align: center;
line-height: 30px;
/*去除下划线格式*/
text-decoration: none;
color: white;
font-weight: bold;
/*使用固定定位*/
position: fixed;
right: 30px;
bottom: 100px;
}
</style>
</head>
<body>
<h2 id="catalogue">开始</h2>
<a href="#catalogue"> 返回<br/>顶部</a>
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
</body>
</html>
使用下面代码就将a标签固定在右下角位置，距离底部100像素，距离右边30像素
position: fixed;
right: 30px;
bottom: 100px;
关于回到顶部功能：a的href设置为要定位的标签的id就行。
<h2 id="catalogue">开始</h2>
<a href="#catalogue"> 返回<br/>顶部</a>
案例3：使用固定定位来实现顶部的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用固定定位来实现顶部的导航栏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
height: 60px;
background-color: #222222;
/*使用固定定位*/
position: fixed;
left: 0px;
top: 0px;
}
.nav .inner_c{
width: 1000px;
height: 60px;
margin: 0px auto;
background-color: #f00;
}
ul{
/*清除无序列表前面的项目符号*/
list-style: none;
}
ul li{
/*左浮动*/
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
ul li a{
display: block;
width: 100px;
height: 60px;
text-decoration: none;
color: white;
font-weight: bold;
}
ul li a:hover{
background-color: gold;
}
body{
padding-top: 60px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<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>
<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="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
</body>
</html>
将导航栏固定在页面左上角
相对定位
1.语法：
position:relative;
相对定位是相对于“原来的自己”来进行定位！
2.特点：
- 相对定位元素它没有脱离标准文档流
- 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
- 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
- 相对定位元素它会将标准文档流中的元素压盖住
- 相对定位元素的定位坐标值可以是负数
案例1：相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
border: 1px solid #000;
margin: 100px auto;
padding-left: 100px;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
/*相对定位属性 相对原来的位置*/
position: relative;
/*设置定位的坐标*/
left: -100px;
}
.div3{
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
大盒子box设置padding-left: 100px，所以初始所有div都在框线右边一点，然后div2也就是绿盒子，设置了相对位置left: -100px;，就是相对原本的位置左移100像素
案例2：相对定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位案例</title>
<style type="text/css">
/*使用属性选择器来匹配元素*/
input[type="text"]{
font-size: 36px;
}
input[type="button"]{
position: relative;
top: 6px;
}
</style>
</head>
<body>
<input type="text" name="">
<input type="button" value="检测用户名">
</body>
</html>
距离顶部6像素，底部尽量和文本框一样齐
绝对定位
1.语法：
position:absolute;
绝对定位是相对于“祖先定位元素”来进行定位！
2.什么是祖先定位元素？
绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素进行定位；但是如果他的父元素没有设置定位属性，那么它就会取查找其父元素的上一级元素是否设置了定位的属性，如果有设置就相当于其父元素的上一级元素进行定位，但是如果没有设置的话，那么就会继续往上一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！
祖先定位元素没有设置position，则相对于body浏览器窗口。
3.特点：
- 绝对定位元素它脱离了标准文档流
- 绝对定位元素它不占用空间
- 绝对定位元素它会压盖住标准文档流重点的元素
- 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位，还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位，父元素设置相对定位。
4.问题：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？
答：
当前的绝对定位元素它会相对于其“父元素”来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。
案例1：绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
border: 1px solid #000;
margin:100px auto;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
/*绝对定位*/
position: absolute;
/*父元素body没有设置position，
则相对于body浏览器窗口*/
top: 0px;
right: 0px;
}
.div3{
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
父元素body没有设置position，则相对于body浏览器窗口
案例2：绝对定位1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
border: 1px solid #000;
margin:100px auto;
/*给其设置一个固定定位*/
position: fixed;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
/*绝对定位*/
position: absolute;
/*父元素div .boxp设置相对文职，则相对于boxp盒子设置位置，离上边0像素，离右边0像素*/
top: 0px;
right: 0px;
}
.div3{
background-color: #00f;
}
.boxp{
width: 600px;
border: 3px solid skyblue;
margin:100px auto;
/*给其设置一个相对定位*/
position: relative;
}
</style>
</head>
<body>
<div class="boxp">
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
</body>
</html>
box固定在左上，因为设置了margin，所以随着窗口居中，上下margin为100px。
boxp设置了相对位置，但没有设置小属性，所以相对原来位置还是不变的。
div2设置了top: 0px;right: 0px;，相对祖先定位元素也就是box，div在box的右上角。
如果想要div2在boxp的右上角，就注释box中的位置代码。
案例3：使用绝对定位来实现拉手网上的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用绝对定位来实现拉手网上的效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 320px;
height: 240px;
border: 1px solid #000;
margin: 100px auto;
/*相对定位*/
position: relative;
}
.box span{
/*绝对定位*/
position: absolute;
left: 0px;
top: -10px;
}
</style>
</head>
<body>
<div class="box">
<span>
<img src="../img/myy.png" alt="">
</span>
<div>
<img src="../img/bao.jpg" width="320" height="240" alt="">
</div>
</div>
</body>
</html>
就是将‘免预约’图片(myy.png)，放到bao.jpg的左上角，也就是相对bao.jpg元素设置位置，所以box设置相对位置，然后span标签设置左上位置，top是-10px，看图片里超出bao.jpg图片10个像素。
