定位属性position小结

1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位。相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置。

2.子元素为relative(相对的)时,不参考父元素的位置,子元素不会脱离文档流,子元素参考自身位置进行定位。

3.子元素为absolute(绝对的)时,当父元素为relative或absolute时,此时父元素有位置信息,子元素会脱离文档流,参考父元素的位置。当父元素为static时,子元素会脱离文档流,子元素参考body原点进行定位。

定位属性position的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  3. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  4. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  5. CSS - 定位属性position使用详解(static、relative、fixed、absolute)

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  6. css 定位属性position的使用方法实例-----一个层叠窗口

    运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...

  7. 关于CSS定位属性 position 的使用

    CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...

  8. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  9. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

随机推荐

  1. Codeforces 877E - Danil and a Part-time Job 线段树+dfs序

    给一个有根树,1e5个节点,每个节点有权值0/.1,1e5操作:1.将一个点的子树上所有点权值取反2.查询一个点的子树的权值和   题解: 先深搜整颗树,用dfs序建立每个点对应的区间,等于把树拍扁成 ...

  2. 在Linux中调试段错误(core dumped)

    在Linux中调试段错误(core dumped) 在作比赛的时候经常遇到段错误, 但是一般都采用的是printf打印信息这种笨方法,而且定位bug比较慢,今天尝试利用gdb工具调试段错误. 段错误( ...

  3. liblensfun 在 mingw 上编译时遇到的奇怪问题

    ffmpeg 2018.07.15 增加 lensfun 滤镜; 这个滤镜需要 liblensfun 库; Website: http://lensfun.sourceforge.net/ Sourc ...

  4. Laravel -- 邮箱功能配置问题

    ```` 今天碰到了这块的问题,还是记一下 ```` 关于邮箱: 品牌:腾讯qq.网易163 等 种类:个人.企业 邮箱服务器种类 配置教程 https://jingyan.baidu.com/art ...

  5. Zabbix告警发送邮件时附带性能图

    脚本处理逻辑分析: 通过zabbix传递给脚本的message参数,筛选出报警信息的itemid; 通过itemid获取到图片并保存; 将报警信息和图片组装成html; 发送邮件. 后续脚本里面的处理 ...

  6. 开发快捷键(Eclipse,STS)

    Eclipse 常用快捷键 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/]   此快捷键为 ...

  7. DOS批处理高级教程(还不错)(转)

    前言 目录 第二节 常用特殊符号     1.@  命令行回显屏蔽符     2.%  批处理变量引导符     3.>   输出重定向符     4.>>  输出重定向符     ...

  8. Codeforces 840C. On the Bench 动态规划 排列组合

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF840C.html 题解 首先,我们可以发现,如果把每一个数的平方因子都除掉,那么剩下的数,不相等的数都可以相 ...

  9. Codeforces 1045E. Ancient civilizations 构造 计算几何 凸包

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1045E.html 4K码量构造题,CF血腥残暴! 题解 首先,如果所有点颜色相同,那么直接连个菊花搞定. ...

  10. Mapreduce概述和WordCount程序

    一.Mapreduce概述 Mapreduce是分布式程序编程框架,也是分布式计算框架,它简化了开发! Mapreduce将用户编写的业务逻辑代码和自带默认组合整合成一个完整的分布式运算程序,并发的运 ...