Question

<div id="main-solutions">
   <div id="main-solutions-top-left"></div>
   <div id="main-solutions-top-right"></div>
   <div id="main-solutions-body">
       blah blah blah
   </div>
</div>

CSS

#main-solutions {
}

#main-solutions-top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
    width: 434px;
    height: 15px;
}

#main-solutions-top-right {
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
    width: 434px;
    height: 15px;
}

#main-solutions-body {
    background: url('../images/Gray-Gradient.jpg') repeat-x;
}

我期待看到主解决方案在我的圆角图像的左上角和右上角有两个绝对定位的div，然后是带有渐变的主体，但是当我使用HTML元素浏览器时，顶部-left和top-right div根本没有出现，非常困惑，为什么这些div被忽视？

更新（对于因答案而困惑的其他人）：

我的问题的根源是我不明白绝对和亲戚都为其内容定义了一个新的坐标系，除了指定元素本身的位置。在这里找到了一个很好的解释：

http://www.w3.org/TR/WD-positioning-970131#Positioned

来自第2.2节

与'绝对'定位元素一样， '相对'定位一个新的子元素的坐标系，原产地位于第一个子元素所在的位置呈现

Answer 1

正如我所看到的那样，角落应该出现在页面的左上角和右上角，因为你的容器div没有CSS position属性。绝对定位元素的位置相对于position除static（默认值）之外的最内层父元素。

尝试将position: relative添加到容器div的CSS中。它的工作原理与默认值非常相似，但是（1）如果你愿意，你可以将div的位置移动一些量（这在这里不是非常有用，但仍然如此），以及（2）因为位置不是static不再，div中的绝对定位的东西应该相对于容器而不是身体/页面定位自己。

此外，某些浏览器甚至不会显示没有内容的div - 因此所述div的背景可能不会显示。你可能想要在div中有东西。即使是单个 也可以。

Answer 2

你是否考虑过使用CSS border-radius来实现这一点而不是搞乱图像？

除了IE之外，所有浏览器都支持

border-radius，但即使是IE，也可以使用一个名为CSS3Pie的聪明小东西来使用它。

（另外作为奖励，CSS3Pie还提供IE CSS渐变背景，所以你可以一石二鸟）

CSS圆角不起作用 - 为什么不呢？

2 个答案: