1.1.静态定位
是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。
position: static,
1.2.相对定位（子元素绝对，父元素相对）
相对定位就是相对于自己以前在标准流中的位置来移动
position: relative,
使用top,right,bottom,left来控制
注意点
相对定位是不脱离标准流的,会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个由于相对定位是不脱离标准流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
1.3.绝对定位
绝对定位就是相对于body来定位position: absolute,
1.默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。2.1只要是这个绝对定位元素的祖先元素都可以2.2指的定位流是指绝对定位/相对定位/定定位2.3定位流中只有静态定位不行
3如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。-
绝对定位注意点
1.绝对定位的元素是脱离标准流的
2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素3.如果一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度
作为参考点
4.一个绝对定位的元素会忽略祖先元素的padding
1.4.固定定位
position: fixed.
固定定位和前面学习的背景关联方式很像,背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点:
1.固定定位的元素是脱离标准流的,不会占用标准流中的空间2.固定定位和绝对定位一样不区分行内/块级/行内块级
1.5.粘滞定位
从相对多绝对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 4000px;
background-color: gray;
margin: 0 auto;
}
.container div{
width: 100%;
height: 500px;
}
.container div:nth-child(odd){
background-color: rgb(224, 126, 6);
}
.container div:nth-child(even){
background-color: rgb(250, 250, 250);
}
.container .left{
width: 100px;
height: 400px;
margin-left: -150px;
background-color: rgb(237, 164, 128);
position: sticky;
top:60px;
float: left;
}
.container .right{
width: 100px;
height: 400px;
margin-right: -150px;
background-color: rgb(237, 164, 128);
position: sticky;
top:60px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<aside class="left"></aside>
<aside class="right"></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
