关于position的理解

作者: dissolvache | 来源:发表于2017-06-22 22:47 被阅读0次

首先最重要的,困惑最多的relative:

//#demo为父元素

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。

所以:

absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的。


同时,relative的位置定位也与absolute不同:

relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。


另:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。

补充注意:relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了,那么他原来的位置也就不存在了,

如果被定义成relative的对象被移出了 他原来的位置还在,别的元素就不能替代这个位置.

相关文章

  • 关于position的理解

    首先最重要的,困惑最多的relative: //#demo为父元素 如果你想让这个#demo里的一个div#sub...

  • 关于css

    在最近的学习中,对css position 理解不好,在网上找了找,觉得关于css position 看一下文章就...

  • 2017-12-30

    position:absolute and position:relative 的理解 Absolute,CSS中...

  • 理解 position

    static: 对象遵循常规流。此时4个定位偏移属性不会被应用。 relative: 对象遵循常规流,并且参照自身...

  • position定位的理解

    最近这两天一直在学习,psition定位。不是太理解,思路有些乱,有些懵逼。今天,在网上也查了下,然后自己梳理了一...

  • 通过案例理解position:relative和position

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网...

  • 通过案例理解position:relative和position

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网...

  • 对position的几点理解

    分类及定义 在W3C中,position 属性规定元素的定位类型,css实例: 它可能的值包括以下五种: abso...

  • 深入理解position

    不得不承认之前对于position的认识真是太肤浅了,以下的这个例子一定会刷新你的认知~ CSS position...

  • css position Absolute理解

    脱离文档流,不占据文档流空间。因此可常常用于背景,上标等(不要采用margin -值的做法) 其中4 , 16的样...

网友评论

    本文标题:关于position的理解

    本文链接:https://www.haomeiwen.com/subject/jolqcxtx.html