zoukankan      html  css  js  c++  java
  • 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定位的小问题还有很多,相信今后的学习和工作中还会再遇到,所以还会再补充。

  • 相关阅读:
    教务管理系统(node+express+mysql)
    poj 2485 Highways 超级大水题 kruscal
    HDU 1874 畅通工程续 + HDU 2544 最短路 最短路水题,floyd水
    HEX格式转BIN格式 MOT格式转BIN格式
    html的标签一共有多少个?
    同时存在n个线程(n>5),需要写入或者读取一个名为test.txt的文件
    poj 1258 AgriNet 水题三连发。。。又是kruscal
    招投标专家库
    poj 1789 kruscal水题
    仿Word自动套用格式,用CSS设置表格样式
  • 原文地址:https://www.cnblogs.com/wx1993/p/4876963.html
Copyright © 2011-2022 走看看