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

ゞ浴缸里的玫瑰 2022-08-09 14:43 169阅读 0赞

# **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`属性值的不同，计算值可能会被覆盖，如下表所示。

<table> 
 <thead> 
  <tr> 
   <th>指定值</th> 
   <th align="center">计算值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption</td> 
   <td align="center">block</td> 
  </tr> 
  <tr> 
   <td>inline-table</td> 
   <td align="center">table</td> 
  </tr> 
  <tr> 
   <td>其他值</td> 
   <td align="center">跟指定值相同</td> 
  </tr> 
 </tbody> 
</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. 声明** #

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

[bitsofcode]: http://bitsofco.de/
[HOW POSITIONING CSS PROPERTIES INTERACT]: http://bitsofco.de/2015/how-positioning-css-properties-interact/
[the box model]: http://bitsofco.de/2015/controlling-the-box-model/
[Link 1]: http://vote.blog.csdn.net/blogstar2015/candidate?username=whqet
[http_blog.csdn.net_whqet_article_details_49464099]: http://blog.csdn.net/whqet/article/details/49464099
[http_whqet.github.io]: http://whqet.github.io
[http_weibo.com_FedFun]: http://weibo.com/FedFun
[http_geek.csdn.net_user_publishlist_whqet]: http://geek.csdn.net/user/publishlist/whqet