zoukankan      html  css  js  c++  java
  • 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也应该被注意。

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

  • 相关阅读:
    钉钉服务器端SDK PHP版
    戒不掉
    亲历钓鱼网站
    我整理的PHP 7.0主要新特性
    JavaScript中JSON的处理心得
    X3D中Profile如何翻译
    你可以写什么?
    Gitblit中采用Ticket模式进行协作开发
    理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();
    测试Remoting三种信道Http,Tcp,Ipc和Web Service的访问速度 (转)
  • 原文地址:https://www.cnblogs.com/longze/p/2787628.html
Copyright © 2011-2022 走看看