CSS的三种定位机制。绝对定位是相对谁?设置百分属性时是相对谁?

直入主题:

CSS定位的三种机制:
一.普通流:
  position: static 元素框正常生成,默认设置。
  position: relative  元素相对于它本来的位置,注意:移动后,在原来的位置会占用一个相同大小的空间。
二.绝对定位:
  position:absolute 相对于最近一层的设置了定位的父级元素(除去position:static)(可以向上寻找满足条件的父级元素),
                  在没有设置了定位元素的父级元素时,相对于HTML根元素定位(不是相对于body)
  position: fixed  相对于视窗(浏览器)定位
三.浮动:(只有元素设置或者继承了position: relative,position: static浮动才会生效(其它属性的position,如pisition:flex会让浮动失效))
float: left/right 元素向左/右移动,知道碰到块的边框,或者碰到另一个浮动元素。
  注意:1.浮动后不会占据原来的空间,所有元素都以块级元素展示。
            2.如果浮动框总宽度超过容器,那么浮动块下移。


            3.如果各个浮动的块高度不同,那么可能位置出现错位。(如图)


元素设置百分比属性时,相对于谁:
一:width:
    width的百分比相对于最近一层的父级元素(因为最近一层的父级元素肯定有确定的宽度,所有不用向上寻找)。
    注意:当元素设置了绝对定位之后,相对于最近一层设置了定位的父级元素(除去static)(此时可以向上寻找满足条件的父级元素),在没有设置绝对定位父级元素时,相对于HTML根元素。
二.height:
    height: height的百分比相对于最近一层的父级元素(父级元素高度由内容决定时即auto,则元素的百分比高度不会生效,不会向上寻找父级元素)
    注意:当元素设置了绝对定位后,相对于最近一层设置了定位的父级元素(除去static)(此时可以向上寻找满足条件的父级元素),在没有设置绝对定位父级元素时,相对于HTML根元素。

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值