您的位置:首页 > Web前端 > CSS

css position属性

2016-06-19 08:42 411 查看
position:static absolute relative fixed

元素position默认是static

TRBL属性(top、right、bottom、left)只有当元素设定了position属性才有效。

1.偏移属性

设置了定位属性的元素,同时获得了偏移属性,top right left bottom z-index但对于static的元素不具有这些属性

2.relative

设置relative的元素,无论是否设置偏移属性,都不会脱离标准文档流,只是相对于元素原始的位置发生了改变,元素的原始位置仍然存在,不会被填充。

如果父级元素没有设置position属性,那么定位是相对于浏览器左上角定位、,如果父级元素设置了position属性,那么就会相对于该元素最近的被定位的父级元素的左上角为原始点进行定位。

3.absolute

设置absolute的元素,会脱离标准文档流,元素的原始位置不再存在,会被其他元素填充,与是否设置了偏移属性无关,元素位置通过偏移属性设置。

如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位

如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

如果绝对定位元素只申明position:absolute,那么其自身定位以及margin的参照物即为其最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的内容框。即没有设置left、top时,left和top的默认值将使元素的位置和“原来的位置”一样。

4.fixed

fixed属性,元素脱离文档流,不随着滚动条滚动而滚动,适合做返回顶部按钮的定位

设置了float属性,元素会脱离标准文档流,其设计是为了实现文字环绕效果,与absolute的区别在于,float的元素在文档流还是占有有一席之位的。即absolute元素不对其他元素造成影响,而float元素会影响到其他元素,所以,二者是不同的文档流。

以上是个人观点,欢迎批评指正,一起学习。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息