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也应该被注意。

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

  • 相关阅读:
    POJ 2230 Watchcow 欧拉回路的DFS解法(模板题)
    POJ 2188 Cow Laundry
    ACM一年记,总结报告(希望自己可以走得很远)
    [USACO1.5]回文质数 Prime Palindromes
    POJ-1276-Cash Machine(多重背包)
    POJ-1322 Chocolate(概率DP)
    POJ-1179 Polygon (动态规划)
    HDU-1520 Anniversary party(树形DP)
    HDU-1054 Strategic Game(树形DP)
    POJ-1157 LITTLE SHOP OF FLOWERS(动态规划)
  • 原文地址:https://www.cnblogs.com/longze/p/2787628.html
Copyright © 2011-2022 走看看