卡塔尔世界杯排名_98世界杯决赛 - dylfjc.com

css定位方式有哪些？区别是什么？

四种方式：静态定位：position:static；

绝对定位：Position：absolute;

相对定位：position:relative;

固定定位:position:fixed;

1.position:static；所有标准流都是这个定位，这个属性一般不会单独使用，一般情况下是通过js来动态给元素清除定位

2.Position：absolute；“看脸型”

（1）如果盒子没有父元素，那么将来在定位的时候，trbl（top,right,bottom,left)是相对于body元素的

（2）如果定位的盒子有父元素，但是父元素没有定位，那么这个子元素定位的trbl还是相对于body的

（3）如果定位的盒子有父元素，且父元素有定位，那么这个元素定位的trbl是相对于他的父元素的

注意点：（1）绝对定位的盒子不占页面上的位置（脱离标准流）

（2）绝对定位以后会影响元素的显示方式

（3）如果没有设置trbl，那么这个元素就算设置了position属性，位置也不会改变

举个栗子：代码如下

效果如下：

3、position:relative;

注意点：（1）相对定位是占据标准流的位置（不会脱离标准流，也就是说其他盒子不会占据他的位置）

（2）相对定位以后不会影响元素的显示方式

（3）如果设置了相对定位但没有设置值，则盒子的位置也不会改变，元素位置通过trbl进行规定

举个栗子：代码如下（就是将上面的代码改为position:relative了）

效果如下图：

4.position:fixed;“死心眼型”

注意点：（1）固定定位会脱离标准流

（2）固定定位会改变元素的显示方式