位置:绝对/固定更改显示属性以阻止 [英] Position:absolute / fixed changes display-property to block

问题描述

今天，我在工作中遇到一个有趣的问题. 当我用position:absolute或fixed设置一个内联元素的样式时，它的行为就像一个可以具有高度和with的块元素. 这是一个简短的示例:

Today I faced an interesting problem at work. When I style an inline-element with position:absolute or fixed it behaves like a block-element which can have a height and with. Here a short example:

span {
  background: red;
  height: 100px;
  width: 100px;
}

span#absolute {
  position: absolute;
  top:30px;
  left:30px;
}

<span>Inline</span>

<span id="absolute">Inline, too</span>

如您所见，两个跨度都有height和width(在内联元素上应该忽略).但是，在使用posision:absolute时会应用它.

As you can see both spans have height and width (which should be ignored on inline-elemens). However it gets applied when using posision:absolute.

所以我的问题是:第二个span完全像display:block一样，还是只是半块式行为?

So my question: Is the second span behaving like display:block completely or is it just a semi-block-behaviour?

推荐答案

影响框生成和布局的三个属性(显示"，位置"和浮动")相互作用如下:
2. […]如果位置"的值为绝对"或固定"，则表示框处于绝对位置，计算的浮点"值为无"，并根据下表进行设置.

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
2. […] if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below.

在下面提到的表中，您会看到对于指定值 inline(默认情况下，用户代理样式表中的span具有该值)， 计算值是…block

And in that mentioned table below, you see that for the specified value inline (which span has by default from the user agent stylesheet), the computed value is … block

这篇关于位置:绝对/固定更改显示属性以阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！