- 当元素设置为
position: absolute的时候，元素的display为block! - 如果一个元素的定位属性设置成了：
position: absolute后，没有设置left/top/right/bottom，并且其祖先元素全部都是非定位元素，它将在还是在当前的位置。
参考segmentfault网站上面的搜索栏
搜索栏.png
定位.png
在这里我们看到绝对定位的时候，不设置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的区别：
什么都没有设置时图片与代码块之间的位置关系.png
图片设置float:right时两者的位置关系：
浮动时位置关系.png
绝对定位时：
绝对定位.png
浮动+绝对定位时：
浮动+绝对定位.png
这里我们看到，在绝对定位和浮动+绝对定位的情况下我们都没有看到图片，其原因就是代码块把图片覆盖了，图片脱离文档流，导致其父元素失去其高度，下面的代码块就会紧跟其父元素的位置向上移动。另外浮动+绝对定位示例也印证了问题4，俩个着不能同用的问题，同用时float会失效。
而单独浮动的时候，浮动是从该位置脱离出来，浮动到文档流的最上方，虽然脱离文档流，但是他紧随其父元素，并占位。
与绝对定位的占位不同，浮动的占位使其具有display: inline-block的特性，而当为绝对定位元素设置z-index的时候我们看到，他们依然是覆盖关系。
绝对定位+z-index.png
- 父元素
text-aligin，子元素绝对定位，可以正常生效；但是将text-aligin和定位用到统一元素上不能生效。原因参考：解释为绝对定位的元素默认的宽度就是其内容的宽度，因而其内容不能再绝对定位的元素里设置水平位置。如果需要生效，则要有更大的容器包裹着他。 -
white-space: nowrap;是针对p标签生效的属性，其含义是规定段落中的文本不换行。对于其他元素如div或span是无效的。
网友评论