摘要:脱离文档流首先设置绝对定位后,会脱离文档流,因此不占据空间。相对于谁定位相对于它在普通文档流中的位置。脱离文档流后可以做什么绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。
脱离文档流?
首先div设置absoluted绝对定位后,div会脱离文档流,因此不占据空间。
与div设置为relative相对定位不同,相对定位实际上被看作普通流定位模型的一部分。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
relative相对于谁定位?相对于它在普通文档流中的位置。
脱离文档流后可以做什么?绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
相对于div最近的(非static定位的)父级元素的borderbox进行定位。主要代码如下:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54637.html
摘要:总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素,由近到远哪个元素不是默认定位即定位的,那么就相对于它进行定位。当父元素链上所有父元素都是默认定位,那么定位就是相对于元素的,效果和定位差不多。 相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方...
摘要:在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。放置绝对定位对象在可视区域之外会导致滚动条出现。相对定位是相对于元素在文档流中初始位置的,而绝对定位是相对于最近的已经定位的祖先元素。 CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占...
摘要:和不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。的绝对定位元素的定位永远是相对于浏览器边界的,和其他元素没有关系。 1.引言 在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题。 如果没有定位,我...
摘要:当一个盒根据常规流或者浮动摆放好后,它可能会相对于该位置移动,这叫相对定位。 当一个盒根据常规流或者浮动摆放好后,它可能会相对于该位置移动,这叫相对定位。 相对定位的盒保持它在常规流中的大小,包括换行和空格都会原样保留 relative与absolute,fixed relative与absolute的关系 在例1中,absolute元素的top/left:0的定位在浏览器窗口的左...
摘要:让元素脱离文档流有三种方法浮动绝对定位固定定位元素脱离文档流定位的三种布局机制文档流浮动定位。定位元素会脱离文档流。浮动的元素是先站住自己所在文档流的位置,然后左右浮动。 文档流 文档流是一种默认定位方式,在文档流中元素框的位置由元素在html中的位置决定,文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行,自上而下排列;内联...
阅读 2048·2021-10-12 10:11
阅读 810·2021-10-09 09:41
阅读 3696·2021-09-09 11:37
阅读 1901·2021-09-08 10:41
阅读 2605·2019-08-30 12:58
阅读 2339·2019-08-30 10:58
阅读 1227·2019-08-26 13:40
阅读 3996·2019-08-26 13:36