zoukankan      html  css  js  c++  java
  • CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit

    属性值为relative、absolute、fixed时top | left | right| bottom | z-index才能起作用。

    static(默认值)

    relative(相对定位)

    absolute(绝对定位)

    fixed(绝对定位,绝对与window浏览器,低版本浏览器不支持如ie6和ie7)

    relative和static都是相对于文档其他元素进行定位,都属于相对定位的范畴,区别在于一个可用控制位移,一个不能

    static(默认值)

    如果使用默认值,在CSS中为元素定义top、left、right、bottom、z-index都不会生效

    relative

    relative的变现和默认值一样,只不过可用通过设置偏移量和z-index来控制相对于其他正常位置进行的偏移。

    所有元素的定位(positon)默认值都是static,什么都不写就是相对定位,而使用position:relative在不设置topp、left、z-index、right、bottom值的情况下和默认值表现是一样的。

    absolute和fixed

    特点:

    1、块级元素的宽度在未定义时不再为100%,而是根据内容自动调整

    2、在不定义z-index的情况下,absoulte元素会覆盖在其他元素上。

    3、它会脱离正常的文档流,不再占据空间,类似于浮动后的效果

    absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position,absolute将相对于整个html文档进行绝对定位。

    fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。也就是说,不论网页如何滚动,该元素始终停留在屏幕的某个位置。如果我们希望左侧边控制栏始终对用户可见,就使用position:fixe来进行定位。

    如果ie6和ie7不支持fixed属性怎么办

    解决办法

    用position:absolute

    _top:expression(eval(document.documentElement.scrollTop))

  • 相关阅读:
    bash :startx command not found
    RHSA-2019:1880-低危: curl 安全和BUG修复更新 及 RHSA-2019:1884-中危: libssh2
    CentOS8 安装后 无法切换中文输入法
    【centOS7】centOS7上普通用户切换root用户,相互切换
    centos8安装图解(超详细教程)
    电导率与土壤盐浓度间的计算公式
    Tlink物联网平台使用(三)
    Wireshark查看https的通讯
    docker中建立私有git服务器[gitlab]
    【转】程序员的生产力始于需求而非工具
  • 原文地址:https://www.cnblogs.com/tongchuanxing/p/6141742.html
Copyright © 2011-2022 走看看