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元素会影响到其他元素,所以,二者是不同的文档流。
以上是个人观点,欢迎批评指正,一起学习。
元素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元素会影响到其他元素,所以,二者是不同的文档流。
以上是个人观点,欢迎批评指正,一起学习。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页