• CSS之position解释


    上篇是CSS盒模型,在盒模型的基础上说明一下position定位:

    position的四个属性值:

      1、static

      2、relative

      3、absolute

      4、fixed

    下面分别讲述这四个属性。

    1、static

    position的默认属性,在这方面个浏览器解析与渲染是一致的,top,left,bottom,right不产生作用

    2、relative

    相对定位,重点是“相对的对象”--想对谁?答案是它本身的位置。也就将relative改为static,再在视觉上加上top,left,bottom,right值,就是relative所呈现的视觉效果。

    可以这样理解,如果不设置relative时它应该在位置A,一旦设置后就以A为参考点进行偏移。补充一下,top和bottom冲突了怎么办?最后声明的起作用,left和right也是一样的道理。

    随后的问题是“对其他标签的影响怎样”。

    答案是它原来在哪里,现在就在哪里,可能被遮盖,也可能遮盖其他。若其他元素的position是static那么被遮盖,z-index属性对position是static的元素不起作用,在发生覆盖冲突时,设置z-index:-1且position为非static的元素被position:static的元素覆盖。若其他元素的position是非static那么后面定义的覆盖前面的。此时z-index也起作用,设置了z-index的覆盖方式遵守z-index。

    3. absolute
    从定义声明position:absolute的元素向外找,第一个position值不是static的元素就是被参考的对象。

    再进一步讲,top参照padding的内上线,bottom参照padding的内下线,right和left同理。

    遮盖的处理用z-index。


    4. fixed
    有了上面的解释这个就好理解了,fixed是特殊的absolute,即fixed的参照对象是body,需要注意的是body也是可以有margin和padding的,还有body默认的8px的margin也应该被注意。

    以上所写都是主流浏览器使用的,如有例外请留言,当然有什么问题也可以留言讨论!

  • 相关阅读:
    基于Apache+php+mysql的许愿墙网站的搭建
    关于php留言本网站的搭建
    httpd服务的安装、配置
    linux下面桌面的安装
    时间同步ntp服务的安装与配置
    通过挂载系统光盘搭建本地yum仓库的方法
    linux系统root用户忘记密码的重置方法
    linux系统的初化始配置
    Linux下通过PXE服务器安装Linux系统
    Linux设置RSA密钥登录
  • 原文地址:https://www.cnblogs.com/longze/p/2787628.html
Copyright © 2020-2023  润新知