乐趣区

关于javascript:Position-Relative-和Absolute-Float使用注意点

好忘性不如烂笔头,以前做的笔记,工夫长了,每次都得翻看笔记本能力找到相干信息,明天就把笔记挨着记录到文章外面去。

  • relative: 绝对定位,绝对定位将元素偏离元素默认的地位,然而一般流中仍旧放弃着原有的默认地位,并没有脱离一般流,只是在视觉上产生了偏移。没有扭转行内元素的 display 属性 <span> 设置 width 有效
  • absolute:相对定位,利用了 position:absolute 的元素会循着节点树种的父(祖)元素来确认“根”,而后绝对这个“根”元素来偏移,如果根元素中都没有设置 position:relative 或者 fixed,那就绝对 body 进行偏移。

块元素
在 position:relative/static) 的状况下 width 为 100%
在 position:absolute 之后,会将 width 变成 auto(会受到父元素宽度的影响)
行内元素
在 position:absolute 之后 width,height 无效,并不需要将 display 扭转 block

如果该元素也要应用 float 的话,应该留神如下几点:
与 position 兼容问题

  1. 元素同时利用了 position: relative、float、(top / left / bottom / right)属性后,则元素先浮动到相应的地位,而后再依据(top / left / bottom / right)所设置的间隔来产生偏移。
  2. 元素同时利用了 position: absolute 及 float 属性,则 float 生效。
  3. 第一个元素利用了 position 之后会笼罩着接下来的 float 元素(如果两个元素所处的地位雷同)
    注:如果你不将 float 的元素的 position 设置成 relative 的话,你想通过设置 float 元素的 z -index 来的达到笼罩 position:absolute 是有效的。同理,float 元素上面存在 position: absolute 的子元素,如果你不将 float 的元素的 position 设置成 relative 的话,absolute 元素是不会定位到 float 元素的。
  4. 同时利用 position: absolute 和 float: left 会导致革除浮动有效(position: relative 则能够革除浮动)。
退出移动版