Position有四个属性值,分别是static 、fixed、 relative 、absolute。

第一个属性值是static,这是position的默认属性,一般我们都不会用到它,所以也很少提到它,但是在特殊的情况下,它又有着不可替代的作用,比如,在媒体查询页面当中,正常页面当中需要给元素加position属性,但是在响应式页面中不需要,这是就只能用position:static;没有position:none;的写法,网页也不会识别。

第二个属性fixed——固定定位,fixed是相对于window窗口的定位,一般在网页中也会经常看到,例如置顶,等

第三个属性值relative——相对定位;相对于自己本身的定位;这个定位一般是和absolute属性值一起用;相对定位不会破坏元素的文本流,但是会改变元素的视觉效果

第四个属性值absolute——绝对定位;相对于父级元素的定位,如果没有父级元素时相对于窗口的定位;

需要注意的是static relative这两个属性值是不会破坏元素的文本属性;但是fixed 和 abosulte则会改变元素的文本流,有float的效果。

position中的四种属性的更多相关文章

  1. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  2. JSP中四种属性保存范围(1)

    一.四种属性范围 在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效request:在一次服务请求范围内,服务器跳转后依然有效session:-在一次会话范围内,无论何种跳 ...

  3. JSP九大内置对象和四种属性范围解读

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文首先主要解说了JSP中四种属性范围的概念.用法与实例. 然后在这个基础之上又引入了九 ...

  4. JavaScript确定一个字符串是否包含在另一个字符串中的四种方法

    一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...

  5. Jsp学习总结(1)——JSP九大内置对象和四种属性范围解读

    一.四种属性范围 1.1.在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效 request:在一次服务请求范围内,服务器跳转后依然有效 session:-在一次会话范围内 ...

  6. jsp四种属性范围

    在JSP提供了四种属性的保存范围.所谓的属性保存范围,指的就是一个设置的对象,可以在多个页面中保存并可以继续使用.它们分别是:page.request.session.appliction. 1.pa ...

  7. Hive 中的四种排序详解,再也不会混淆用法了

    Hive 中的四种排序 排序操作是一个比较常见的操作,尤其是在数据分析的时候,我们往往需要对数据进行排序,hive 中和排序相关的有四个关键字,今天我们就看一下,它们都是什么作用. 数据准备 下面我们 ...

  8. 对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)

    一. AES对称加密: AES加密 分组 二. 分组密码的填充 分组密码的填充 e.g.: PKCS#5填充方式 三. 流密码:   四. 分组密码加密中的四种模式: 3.1 ECB模式 优点: 1. ...

  9. JAVA基础学习之throws和throw的区别、Java中的四种权限、多线程的使用等(2)

    1.throws和throw的区别 throws使用在函数外,是编译时的异常,throw使用在函数内,是运行时的异常 使用方法 public int method(int[] arr) throws ...

随机推荐

  1. StringUtils、CollectionUtils工具类的常用方法

    唯能极于情,故能极于剑 欢迎来到 “程序牛CodeCow” 的博客,有问题请及时关注小编公众号 “CodeCow”,大家一起学习交流 下面将为大家演示StringUtils.CollectionUti ...

  2. 剑指Offer之替换空格

    题目描述:请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 函数实现: package s ...

  3. 《HelloGitHub》第 50 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  4. 极客手中的利器Electron

    作为一个前端开发人员,你可能已经听说过Electron了,你知道VS Code是基于这个技术开发的.不但VS Code, 目前一些大热的软件:飞书.Slack.WhatsApp都是基于这个技术开发的. ...

  5. GNS3--cisco路由器NAT配置

    一.基础 Cisco路由器配置中NAT的主要命令: 静态NAT: 1.指定NAT内部接口 在内网相应接口的接口配置模式下执行:ip nat inside 2.指定NAT外部接口 在外网相应接口的接口配 ...

  6. 2017-ICLR-NAS_with_RL-Neural Architecture Search with Reinforcement Learning-论文阅读

    NAS with RL 2017-ICLR-Neural Architecture Search with Reinforcement Learning Google Brain Quoc V . L ...

  7. 【极客思考】计算机网络:Wireshark抓包分析TCP中的三次握手与四次挥手

    [摘要]本文重点分析计算机网络中TCP协议中的握手和挥手的过程. [前提说明] 前段时间突然看到了一篇关于TCP/IP模型的文章,心想这段时间在家里也用wireshark抓了点包,那么想着想着就觉得需 ...

  8. 北京理工大学复试上机--2001A

    1.编写程序,计算下列分段函数 y=f(x)的值. y = -x + 2.5, 0 <= x < 2 y = 2 - 1.5 (x - 3) (x - 3), 2 <= x < ...

  9. js在运算时的类型转换

    日期类型与数字类型的运算 在加法时将日期对象与数字都当作字符串进行连接 字符串的运算方式中没有减法.乘法.除法.转化成数字类型进行运算 字符串类型字符与数字类型的运算 在加法时将二者都转换成字符串进行 ...

  10. (Java实现) 有重复元素排列问题

    有重复元素的排列问题 [问题描述] 设R={ r1, r2 , -, rn}是要进行排列的n个元素.其中元素r1, r2 , -, rn可能相同.试设计一个算法,列出R的所有不同排列. [编程任务] ...