资讯专栏INFORMATION COLUMN

absoluted定位和relative定位

TwIStOy / 1381人阅读

摘要:脱离文档流首先设置绝对定位后,会脱离文档流,因此不占据空间。相对于谁定位相对于它在普通文档流中的位置。脱离文档流后可以做什么绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。

脱离文档流?

首先div设置absoluted绝对定位后,div会脱离文档流,因此不占据空间。
与div设置为relative相对定位不同,相对定位实际上被看作普通流定位模型的一部分。

absoluted相对于谁定位?

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。

relative相对于谁定位?

相对于它在普通文档流中的位置。

脱离文档流后可以做什么?

绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。


absoluted相对定位是相对于哪个盒子进行定位

相对于div最近的(非static定位的)父级元素的borderbox进行定位。主要代码如下:






文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54637.html

相关文章

  • 探究position定位中absoluterelative的异同

    摘要:总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素,由近到远哪个元素不是默认定位即定位的,那么就相对于它进行定位。当父元素链上所有父元素都是默认定位,那么定位就是相对于元素的,效果和定位差不多。 相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方...

    NickZhou 评论0 收藏0
  • css position: absolute、relative详解

    摘要:在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。放置绝对定位对象在可视区域之外会导致滚动条出现。相对定位是相对于元素在文档流中初始位置的,而绝对定位是相对于最近的已经定位的祖先元素。 CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占...

    h9911 评论0 收藏0
  • 重拾css(11)——position

    摘要:和不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。的绝对定位元素的定位永远是相对于浏览器边界的,和其他元素没有关系。 1.引言 在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题。 如果没有定位,我...

    刘明 评论0 收藏0
  • 相对定位(Relative positioning)

    摘要:当一个盒根据常规流或者浮动摆放好后,它可能会相对于该位置移动,这叫相对定位。 当一个盒根据常规流或者浮动摆放好后,它可能会相对于该位置移动,这叫相对定位。 相对定位的盒保持它在常规流中的大小,包括换行和空格都会原样保留 relative与absolute,fixed relative与absolute的关系 在例1中,absolute元素的top/left:0的定位在浏览器窗口的左...

    cyixlq 评论0 收藏0
  • CSS 3-浮动、定位

    摘要:让元素脱离文档流有三种方法浮动绝对定位固定定位元素脱离文档流定位的三种布局机制文档流浮动定位。定位元素会脱离文档流。浮动的元素是先站住自己所在文档流的位置,然后左右浮动。 文档流 文档流是一种默认定位方式,在文档流中元素框的位置由元素在html中的位置决定,文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行,自上而下排列;内联...

    TalkingData 评论0 收藏0
  • CSS详细解读定位

    摘要:有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位,固定定位。我的回答是相对自己文档流中的原始位置定位。这里就不解释脱离文档流的问题,主要研究它的定位问题。 一 前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性,可以让你更加深入的理解定位带来的一些特性,熟练使用CSS布局。 二 正文 1.文档流布局的概念 将窗体自上而下分成一行行, 并在每行中按从左至右的...

    1treeS 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<