• position定位的小问题


    css中position定位有四个属性,分别是:static、fixed、relative、absolute

    其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序;

    fixed是固定定位,和absolute定位不同的是,设置为固定定位的元素不会随页面滚动而改变位置,所以经常用在登录框和导航中。

    relative,相对定位,相对元素原来的位置进行定位。脱离文档流。

    absolute,绝对定位,需要一个父元素作为参考,并且父元素设置不能为static。如果无父元素则默认为body元素。脱离文档流。

    几个属性的概念都比较简单,下面通过代码效果讲解一下需要注意的问题:

    如上图所示,从左到头依次是定位为static、fixed、relative、absolute的元素。

    需要提醒的是,在样式中设置了body的padding值为30px

    其中,定位为static的元素尽管设置了偏移量,但是其位置仍然和标准的文档流无任何区别,即偏移量是无效的。

    定位为fixed的元素相对浏览器进行定位,所以可以发现尽管设置了body的padding为30px,但是当给元素进行固定定位时,会忽略页面的padding值,始终根据浏览器窗口的位置进行定位

    另外一个问题是,定位为fixed的元素自动拥有了z-index的偏移量,即脱离文档流,浮动在其他元素的上方。所以当滚动页面时会发现后面的元素会从其下方穿过。

    定位为relative的元素相对元素原来的位置(处于标准文档流中的位置)进行定位,所以仍会受body的padding值的影响。

    定位为absolute的元素需要有定位不为static的元素进行参照定位,其位置相对与当前页面固定,但是随着浏览页面的滚动,其位置会跟着滚动,这也是和定位为fixed的元素的区别。

    关于position定位的小问题还有很多,相信今后的学习和工作中还会再遇到,所以还会再补充。

  • 相关阅读:
    FastDFS
    MYSQL日常操作
    SVN安装
    mysql主主配置
    MySQL优化
    nginx反向代理tomacat+keepalived实现动静分离、负载均衡、高可用
    nginx故障及处理
    nginx配置检测及安全配置
    nginx基本优化
    大金空调适配器
  • 原文地址:https://www.cnblogs.com/wx1993/p/4876963.html
Copyright © 2020-2023  润新知