定位
定位流的分类
1.相对定位
什么是相对定位？
相对定位就是相对于自己以前在标准流中的位置来移动
注意点
- 相对定位是不脱离标准流的，会继续在标准流中占据一份空间；
- 需要配合其他的属性一起使用，相对于自己以前在标准流中的位置来移动；
position: relative;
top: 20px;
right: ;
bottom: ;
left: 20px;
- 在相对定位中同一个方向上的定位属性只能使用一个；
- 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素的；
- 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候，会影响到标准流的布局
应用场景
- 用于对元素进行微调；
例如：当input和img的顶部对不齐时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>75-定位流</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
width: 200px;
height: 50px;
}
img{
width: 100px;
height: 50px;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<input type="text">
<img src="images/vcode.jpg">
</body>
</html>
- 配合绝对定位来使用。
2.绝对定位
什么是绝对定位？
就是相对于body来定位（不一定是相对于body）
规律：
- 默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。
- 如果一个绝对定位的元素有祖先元素，并且祖先元素，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
（只要是这个绝对定位元素的祖先元素都可以；定位流指的是绝对定位、相对定位、固定定位，只有静态定位不行） - 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个元素为参考点（就近原则）
注意点
- 绝对定位的元素是脱离标准流的；
- 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。
- 如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的高度和宽度作为参考点的；
- 一个绝对定位的元素会忽略祖先元素的padding。
应用场景
在企业开发中，不会单独使用相对定位或者绝对定位。
单独使用相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。
单独使用绝对定位的弊端：
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化。
绝对定位和相对定位结合使用：子绝父相
子元素用绝对定位，父元素用相对定位
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>79-绝对定位-子绝父相</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
width: 800px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
}
ul li{
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #cccccc;
}
ul li:nth-of-type(4){
background-color: yellow;
position: relative;
}
ul li img{
/*单独使用相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。*/
/*position: relative;
left: -42px;
top: -18px;*/
/*单独使用绝对定位的弊端：
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化*/
/*position: absolute;
left: 526px;
top: 90px;*/
/*绝对定位和相对定位结合使用：子绝父相
子元素用绝对定位，父元素用相对定位*/
position: absolute;
left: 40px;
top: -10px;
}
</style>
</head>
<body>
<ul>
<li>服装城</li>
<li>美妆馆</li>
<li>京东超市</li>
<li>全球购
<img src="images/hot.png">
</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li>金融</li>
</ul>
</body>
</html>
如何让绝对定位的元素水平居中
只需要设置绝对定位的元素的left：50%；
然后在设置绝对定位元素的margin-left：—元素宽度的一半px；
例如：
ul li img{
/*单独使用相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。*/
/*position: relative;
left: -42px;
top: -18px;*/
/*单独使用绝对定位的弊端：
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化*/
/*position: absolute;
left: 526px;
top: 90px;*/
/*绝对定位和相对定位结合使用：子绝父相
子元素用绝对定位，父元素用相对定位*/
position: absolute;
/*left: 40px;*/
left: 50%;
margin-left: -12px;
top: -10px;
}
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
