定位之包含块

   在前端开发中,经常会碰到使用定位的情况,常见的一种情况是将定位的元素的父级也开启定位,通过参照父级元素来对元素进行定位,然而在实际开发中,情况远远不止一种,总的来说,定位元素参照的都是其包含块,但是情况不同,包含块也不一样。

   首先,解释一下包含块,一般来说,“根元素”的包含块(也称为初始包含块)由用户代理建立。在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。在大多数浏览器中,初始包含块是一个视窗大小的矩形。

   包含块的情况:

      1、对于一个非根元素,如果其position的值是relative或者static,包含块则由最近的块级框、表单元素或者是行内块祖先框的内容边界构成。

      2、对于一个非根元素,如果其position的值是absolute,包含块设置为最近的position的值不是static的祖先元素(可以是任何类型)。这个过程如下:

         - 如果这个祖先元素是块级元素,包含块则设置为该元素的内边距边界,也就是由边框界定的区域。

         - 如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界。在从左向右读的语言中,包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界,包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中,包含块的有边界对应于第一个框右内容边界,包含块左边界则取自最后一个框左内容边界。上下边界也是一样。

        - 如果没有祖先,元素的包含块定义为初始包含块。

还有一点需要注意,在设置定位偏移量时,其初始默认值是auto,而不是0!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值