CSS中的重点和难点（绝对定位与相对定位）
绝对定位
设置position属性的时候，如果设置的属性值是absolute，此时就是绝对定位
绝对定位跟相对定位不同
影响后⾯的兄弟元素
相对body定位
在相对定位中，相对于原有位置进⾏定位的
在据对定位中，相对于body元素定位的
注意
设置top的时候，根据body的顶边定位
设置bottom的时候，相对于屏幕的底边定位
left和right是相对于body左右边定位的。
1 div {
2 width: 200px;
3 height: 200px;
4 background: green;
5 position: absolute;
6 /*top: 200px;*/
7 /*left: 100px;*/
8 /*bottom优先级低于top，要注释top*/
9 bottom: 200px;
10 right: 200px;
11
12 }
绝对定位影响宽⾼
在未设置盒⼦的宽度和⾼度的时候，我们可以通过绝对定位的偏移量：top，bottom，right, left来设置盒⼦的宽⾼
相对定位不可以
相对定位并没有修改盒⼦的宽⾼，宽度还是100%，⾼度还是内容的⾼度
绝对定位修改盒⼦的宽⾼，宽度不再是100%，宽度和⾼度都是由偏移量top，bottom，left，right定义的
就近原则
嵌套的盒⼦设置了绝对定位，它会寻离他最近的设置了定位的祖先元素（绝对定位，相对定位，固定定位），从⽽来定义相对的偏移量。
也就是说，此时不再以body定位，⽽是相对设置了定位的祖先元素定位
1 .box1 {
2 border: 1px solid #000;
3 padding: 50px;
4 width: 498px;
5 height: 498px;
6 }
7 .box2 {
8 border: 1px solid #000;
9 padding: 50px;
10 width: 398px;
11 height: 398px;
12 /*相对定位*/
13 position: relative;
14 }
15 .box3 {
16 border: 1px solid #000;
17 padding: 50px;
18 width: 298px;
19 height: 298px;
20 }
21 .box {
22 width: 50px;
23 height: 50px;
24 background: green;
25 /*据对定位，默认相对于body*/
26 position: absolute;
27 top: 50px;
28 left: 50px;
29 }
定位顶点
绝对定位是相对于⽗元素的padding定点（包含padding）进⾏定位设置的。设置border会影响定位的结果
1 .box
2 {
2 border: 50px solid #000;
3 padding: 50px;
4 width: 350px;
5 height: 350px;
6 /*相对定位*/
7 position: relative;
8 }
display
不论是⾏内元素，还是块元素，设置了绝对定位，display属性失效，此时有点类似inline-block，不论是块元素还是⾏内元素，都可以直接设置宽⾼
1 .box {
2 width: 50px;
3 height: 50px;
4 background: green;
5 /*据对定位，默认相对于body*/
6 position: absolute;
7 top: 50px;
8 left: 50px;
9 /*设置display失效了*/
10 display: inline;
11 }
压盖现象
元素设置了绝对定位，此时会有压盖现象，后⾯的元素会显⽰在前⾯的元素上⾯
后⾯还会继续讨论压盖现象
css固定定位绝对定位居中
我们可以根据绝对定位的特性让元素居中
绝对定位是相对于元素左上⾓的⼀点进⾏定位的，我们可以将其设置成50%，此时该元素的左上⾓⼀点将在页⾯中⼼，我们通过margin向上和向左平移宽⾼的⼀半，既可以实现元素的居中（兼容块元素和⾏内元素，绝对定位不会区分块元素和⾏内元素）
1 .box {
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 margin: -100px -150px;
6 width: 300px;
7 height: 200px;
8 background: green;
9 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论