定位绝对时的CSS边界属性奇怪行为

Question

我正在用CSS3创建形状，所以我创建了一个带CSS3的棒型形状，后面跟着CSS;

.rod {
    border-radius: 39px;
    border: 17px solid rgb(51, 51, 51);
    transform: rotate(-6deg);
}

我需要它在其他div's的顶部，所以我将它定位为绝对，但是position: absolute;使它成为圆形，我想知道是什么使它变成圆形形状连接{{1 }}和position: absolute属性有。

border

Fiddle with Position Absolute

我知道修复但我不知道原因。

Answer 1

您没有为width元素指定rod样式，这就是它成为圆形对象的原因（绝对定位元素默认为0宽度，如果它没有内容）。尝试在div中添加宽度或文本，现在您将看到它变成更长的棒：）

样品：

.rod {
    border-radius: 39px;
    border: 17px solid rgb(51, 51, 51);
    transform: rotate(-6deg);
    position: absolute;
    width: 300px;
}

Answer 2

定位的元素在其内容周围折叠，而div通常显示为“块”，贪婪地占据整个宽度。当您使用display:inline-block而不是position:absolute时，您会得到相同的行为。

修复是明确说明元素的宽度：

.rod {
    border-radius: 39px;
    border: 17px solid rgb(51, 51, 51);
    transform: rotate(-6deg);
    position: absolute;
    width: 100%;
}