- 当元素设置为
position: absolute
的时候,元素的display
为block
! - 如果一个元素的定位属性设置成了:
position: absolute
后,没有设置left/top/right/bottom
,并且其祖先元素全部都是非定位元素,它将在还是在当前的位置。
参考segmentfault网站上面的搜索栏
在这里我们看到绝对定位的时候,不设置left/top/right/bottom
则默认left: 0;top: 0
。
absolute
是一个相对比较独立的CSS属性,它的样式和行为表现不依赖其他的CSS属性就可以完成。因此,如果元素设置了定位属性为absolute
绝对定位,并且没有设置left/top/right/bottom
,那么可以将这种定位属性称为“无依赖绝对定位”,其本质就是"相对定位",特点仅仅是脱离文档流,不占据任何CSS流的尺寸空间了。
-
z-index
属性只有在position:relative
、position:absolute
和position:fixed
参与的情况下才有作用。 - 绝对定位与浮动不能混用:这两个都是对一个block位置的控制,他们是是互斥的。一个是说用 top等属性确定他的位置,一个是说浮动到父元素的尽可能的最上,最右则。显示这是两个不同的位置,所以必然只有一个能生效。
- 关于
position: absolute
和float
的区别:
图片设置float:right
时两者的位置关系:
绝对定位时:
浮动+绝对定位时:
这里我们看到,在绝对定位和浮动+绝对定位的情况下我们都没有看到图片,其原因就是代码块把图片覆盖了,图片脱离文档流,导致其父元素失去其高度,下面的代码块就会紧跟其父元素的位置向上移动。另外浮动+绝对定位示例也印证了问题4,俩个着不能同用的问题,同用时float会失效。
而单独浮动的时候,浮动是从该位置脱离出来,浮动到文档流的最上方,虽然脱离文档流,但是他紧随其父元素,并占位。
与绝对定位的占位不同,浮动的占位使其具有display: inline-block
的特性,而当为绝对定位元素设置z-index
的时候我们看到,他们依然是覆盖关系。
- 父元素
text-aligin
,子元素绝对定位,可以正常生效;但是将text-aligin
和定位用到统一元素上不能生效。原因参考:解释为绝对定位的元素默认的宽度就是其内容的宽度,因而其内容不能再绝对定位的元素里设置水平位置。如果需要生效,则要有更大的容器包裹着他。 -
white-space: nowrap;
是针对p
标签生效的属性,其含义是规定段落中的文本不换行。对于其他元素如div
或span
是无效的。