CSS定位属性之间的相互作用

0. 目录

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）。

<code class="language-css hljs  has-numbering"><span class="hljs-class">.foo</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> none</span></span>;

  <span class="hljs-comment">/* None of these apply，以下这些将不会应用 */</span>
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span>;
<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

2.2 POSITION: ABSOLUTE (OR FIXED)

如果将position属性设置为absolute或fixed时，将会产生以下作用：

Float

对float属性设置的任何值都会被覆盖，float属性的计算值(the computed value)自动设置为none。

<code class="language-css hljs  has-numbering"><span class="hljs-class">.foo</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>; <span class="hljs-comment">/* 被忽略, 计算值为none */</span>
<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

DISPLAY

随着display属性值的不同，计算值可能会被覆盖，如下表所示。

指定值	计算值
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表现上没有区别。

<code class="language-css hljs  has-numbering"><span class="hljs-class">.foo</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> fixed</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>; <span class="hljs-comment">/* ignored, computed value is block */</span>
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.bar</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> fixed</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

2.3 FLOAT: LEFT (OR RIGHT)

除了上面两种情况，当我们把float属性设置为left或right时，相互作用如下：

DISPLAY

跟上面绝对定位、固定定位类似，元素浮动后display属性变换如上表所示。
下面代码中，.foo和.bar的表现效果也一样。

<code class="language-css hljs  has-numbering"><span class="hljs-class">.foo</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>; <span class="hljs-comment">/* ignored, computed value is block */</span>
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.bar</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

2.4 POSITION: STATIC

除了上面的变化，当position属性值为static时，相互作用如下：

偏移值

当元素静态定位时，偏移属性将失效，如下代码所示。

<code class="language-css hljs  has-numbering"><span class="hljs-class">.foo</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> static</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> <span class="hljs-number">50</span>px</span></span>; <span class="hljs-comment">/* does not apply */</span>
<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

3. 声明

爱前端，乐分享。前端痴王海庆的博客，希望与您共同进步。
博客之星评选正在进行，投我一票，感谢您的支持。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接http://blog.csdn.net/whqet/article/details/49464099
独立博客http://whqet.github.io
新浪微博http://weibo.com/FedFun
极客头条http://geek.csdn.net/user/publishlist/whqet