0. 目录
目录 引言 正文 1 display none 2 position absolute or fixed float display 3 float left or right display 4 position static 偏移值 声明
1. 引言 原文：bitsofcode的how positioning css properties interact
译者：爱前端，乐分享的fedfun，前端痴王海庆的博客。
译言：来看下css标布局情况下，定位相关属性之间的相互作用，意译为主，不当之处敬请指正。
阅读建议5分钟。
2. 正文 在定位元素时，我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性，一些特殊的值组合会覆盖其他属性的应用，这些组合有：
display: none position: absolute或position: fixed float: left或float: right position: static 接下来，我们就一起来研究这些组合之间如何相互作用。
2.1 display: none 当display设置成none时，其它定位属性统统失效，因为没有产生盒模型（the box model）。
.foo { display: none; /* none of these apply，以下这些将不会应用 */ position: absolute; float: left; top: 10px;}
2.2 position: absolute (or fixed) 如果将position属性设置为absolute或fixed时，将会产生以下作用：
float 对float属性设置的任何值都会被覆盖，float属性的计算值(the computed value)自动设置为none。
.foo { position: absolute; float: left; /* 被忽略, 计算值为none */}
display 随着display属性值的不同，计算值可能会被覆盖，如下表所示。
指定值specified value 计算值computed value
inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption block
inline-table table
其他值 跟指定值相同
下面的代码中，.foo和.bar表现上没有区别。
.foo { position: fixed; display: inline-block; /* ignored, computed value is block */}.bar { position: fixed; display: block;}
2.3 float: left (or right) 除了上面两种情况，当我们把float属性设置为left或right时，相互作用如下：
display 跟上面绝对定位、固定定位类似，元素浮动后display属性变换如上表所示。
下面代码中，.foo和.bar的表现效果也一样。
.foo { float: left; display: inline-block; /* ignored, computed value is block */}.bar { float: left; display: block;}
2.4 position: static 除了上面的变化，当position属性值为static时，相互作用如下：
偏移值 当元素静态定位时，偏移属性将失效，如下代码所示。
.foo { position: static; top: 50px; /* does not apply */}
3. 声明