css定位属性详解(position属性)

一、定位属性
        1、定位属性
            属性:position
            取值:
                1、static
                    默认值,默认定位方式
                2、relative
                    相对定位
                3、absolute
                    绝对定位
                4、fixed
                    固定定位
            注意:position取值为 relative,absolute,fixed 的元素被称为 已定位元素
        2、偏移属性
            作用:移动已定位元素
            属性:
                top:值;
                bottom:值;
                left:值;
                right:值;
        3、堆叠顺序
            属性:z-index
            取值:无单位数值
    二、定位方式-相对定位
        1、什么是相对定位
            元素会相对于它原来的位置偏移某个距离

            元素移动位置后,原来所占据的空间依然会保留
        2、使用场合
            位置微调
        3、语法:
            属性:
                position:relative;
            配合着 偏移属性 实现位置的移动
    三、定位方式-绝对定位
        1、绝对定位的特征
            1、元素会脱离文档流
            2、相对于 最近的 已定位的祖先元素 来实现位置的初始化
            3、如果元素没有已定位祖先元素,那么它的位置就相对于最初的包含块(body,html)
        2、语法
            属性:
                position:absolute;
                配合着 偏移属性 实现位置的初始化或移动
        3、绝对定位使用场合
            弹出菜单
        4、注意
            1、绝对定位的元素会变成块级
            2、绝对定位的元素可以使用 margin来改变位置,但是 margin:auto 会失效
    四、堆叠顺序
        1、作用
            处理 已定位元素的 堆叠效果 (z-index必须配合position属性使用)
        2、默认堆叠效果
            1、平级元素-后来者居上
            2、子元素压在父元素之上-子压父
        3、属性
            z-index
            取值:数值越大越靠上
        4、注意
            1、取值可以为负
                取值为负时,当前元素会位于页面正常显示内容之下
            2、z-index 是无法改变父子关系的堆叠顺序
    五、固定定位
        1、什么是固定定位
            将元素固定在网页的某个位置处
            不会随着滚动条而发生位置的变化
        2、语法
            position:fixed;
            配合 片以属性 改变元素位置

        3、注意
            固定定位永远都是相对于浏览器窗口进行位置初始化的。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值