定位
定位流的分类
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;
}