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 .box2 { 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 }

 

压盖现象

元素设置了绝对定位，此时会有压盖现象，后面的元素会显示在前面的元素上面

后面还会继续讨论压盖现象

 

绝对定位居中

我们可以根据绝对定位的特性让元素居中

绝对定位是相对于元素左上角的一点进行定位的，我们可以将其设置成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 }