CSS 定位总结
来源:互联网 发布:阿里云acp培训 编辑:程序博客网 时间:2024/05/21 09:51
CSS 有三种基本的定位机制:普通流、浮动和绝对定位,但本篇文章要总结的是CSS中的position属性,position有四个值,static,absolute,relative,fixed。
相对定位 relative
生成相对定位的元素,相对于其正常位置进行定位,它原本占据的空间流仍然存在。当使用left、top、right、bottom偏移时起始计算点为外边距最外层,偏移后的元素不占据空间流,对后面的元素排版不受影响,但会覆盖后面的元素。
绝对定位 absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,它原本占据的空间流不存在了。这里特别要注意的是决定定位是相对于谁进行定位的,如果绝对定位的元素父元素不是fixed,absolute,relative中任何一种,则不相对于父元素定位,而是继续往上查找,直到其中一个父辈元素的position属性不为static为止,如果没找到,则相对于浏览器屏幕左上角定位,而不是相对于body或者html定位,那为什么网上会有人说相对于body或者html定位呢,那是因为当left,right,top,bottom值不设置的时候,left和top会自动计算使其看起来像相对于body定位的,也就是不偏移了。比如给html和body设置margin:20px,那么绝对定位的元素left和top自动计算为40px,如果设置绝对定位元素的left和top为0,则绝对定位元素就跑到屏幕左上角了。
如果绝对定位的父元素position属性为relative,那么就相对于父元素定位,父元素设置了margin和padding以及border属性后,绝对定位是相对于父元素的内容+padding开始定位的,不包括margin和border。
固定定位 fixed
生成绝对定位的元素,相对于浏览器窗口进行定位,固定定位是绝对定位的一种特殊定位,只不过相对于浏览器窗口定位而无论父元素是什么定位。固定定位一般用于模态框和固定在屏幕右下角的返回顶部按钮。
- css定位总结
- CSS 定位总结
- CSS定位总结
- CSS定位与浮动总结
- css四中定位总结备忘
- css 定位模型和浮动总结
- CSS中浮动和定位的总结
- CSS总结-----定位与盒子图
- 总结一下CSS中的定位 Position 属性
- CSS布局与定位——Positioning(定位)四种定位方式要点总结
- CSS定位
- CSS定位
- CSS定位
- CSS定位
- CSS定位
- CSS定位
- CSS定位
- css 定位
- 用U盘制作win7系统安装盘
- activiti5.20简单介绍(三) -- 环境搭建,数据库表
- SD卡引脚定义
- ubuntu下安装git
- 【Android应用】 6.0代码申请权限 向SD卡写入文件
- CSS 定位总结
- 排序算法总结
- 读代码犹如读诗词歌赋,慢慢读,仔细读
- 解决脚本不能使用onchange的问题
- 高并发容器--CopyOnWrite
- 阿里旺旺聊天发包CALL发送消息
- 机器学习开源库总结
- sql中left join 和 right join的区别基础举例,仅供辨识
- 中心认证服务(CAS)入门(一)