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

0. 目录

1. 引言

原文:bitsofcodeHOW POSITIONING CSS PROPERTIES INTERACT
译者:爱前端,乐分享的FedFun,前端痴王海庆的博客。
译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为主,不当之处敬请指正。
阅读建议5分钟。

2. 正文

在定位元素时,我们经常用到四个属性displaypositionfloat和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性,一些特殊的值组合会覆盖其他属性的应用,这些组合有:

  • display: none
  • position: absoluteposition: fixed
  • float: leftfloat: 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属性设置为absolutefixed时,将会产生以下作用:

Float

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

.foo {
  position: absolute;
  float: left; /* 被忽略, 计算值为none */
}

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表现上没有区别。

.foo {
  position: fixed;
  display: inline-block; /* ignored, computed value is block */
}
.bar {
  position: fixed;
  display: block;
}

2.3 FLOAT: LEFT (OR RIGHT)

除了上面两种情况,当我们把float属性设置为leftright时,相互作用如下:

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. 声明

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页