• CSS中position属性三大定位方式讲解


    Relative

    Relative的元素相对于它原本的位置来做定位,但在文档流中依然保持着原有的默认位置,即使它作了偏移,周围的元素也不会占领的它的位置。

    如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置)。

    如果同时声明top和bottom的值,那么top值的优先级更高。如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语)。比如,在英语的网页中,left的优先级更高;在阿拉伯语的网页中,right的优先级更高。

    Absolute

    绝对定位的元素将脱离文档流。即在排版中,绝对定位的元素不再占有它原来的位置,后面的元素将占领它原本的位置。

    绝对定位的元素根据它的相对定位(Relative)的父节点的位置定位。如果它没有相对定位的父节点,则直接参考body容器定位。

    对绝对定位的元素使用偏移量属性,这个元素将以相对定位的父节点作为参考系进行偏移。如果没有对绝对定位的元素使用偏移量属性,那么该元素将被放置在父节点的左上角。

    如果只设置了top属性,那么该元素则只做垂直方向的偏移,而水平方向依然靠着父节点的最左边。


    1、如果绝对定位的元素有固定的height和width值:

    如果同时声明top和bottom的值,那么top值的优先级更高。如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语)。比如,在英语的网页中,left的优先级更高;在阿拉伯语的网页中,right的优先级更高。

    2、如果绝对定位的元素没有固定的height或者width值:

    (1)如果元素并没有固定height值,可是却同时有top和bottom的值,那么该元素将横跨除了top和bottom之外剩下的所有高度。
    (2)如果元素并没有固定width值,可是同时有left和right的值,那么该元素将横跨除了left和right之外剩下的所有宽度。
    (3)如果元素既没有固定height和width值,却同时有top, bottom, left, right值,那么该元素将占据除了四条边距离之外的所有空间。

    Fixed

    固定定位的元素跟绝对定位的元素很相似,只不过它参照的坐标系是浏览器的视口(viewport)。固定定位的元素不随着页面滚动而移动,它会始终保持在那个位置。另外,在IE6中使用固定定位有一个BUG,需要使用一些hack来解决。

    行内元素设置positon属性后的变化

    relative : 不会改变元素的Display属性,原来是什么类型的依旧是什么类型。
    absolute | fixed :行内元素将被重置为块级元素。例如:

    <span style="position:absolute; 100px; height:50px;">span</span>

    这是完全正确的。

    <span style="position:absolute; display:block; 100px; height:100px;">span</span>

    这里的display:block是多余的。

    position 与 float

    一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

    ------------------

    【参考资料】

    1. 关于CSS中的float和position
    2. CSS中的Position属性
    3. 对CSS中的Position、Float属性的一些深入探讨
  • 相关阅读:
    Linux 套接字编程
    Linux 网络(连接)相关参数作用
    Python WSGI
    Ubuntu Cloud Image in Openstack
    AWK
    MySQL--开发技巧(一)
    spring MVC--配置注解
    javascript-JQuery样式篇(一)
    JSP--常用标签
    spring MVC basic
  • 原文地址:https://www.cnblogs.com/linyewei/p/4379674.html
Copyright © 2020-2023  润新知