0

这是一个例子，

请注意 .mappanel，它覆盖了浏览器的所有宽度，而我希望.textviewdiv 显示在右侧。

当我删除位置：相对时，它起作用了（虽然我不能同时删除position:relative两者。

实际上，我想要的是.textview采用固定宽度（在我的示例中为 380），然后.mappanel向左。

在某个时候，.textview罐子倒塌了，然后.mappanel占据了所有的宽度

更新：

有人建议我使用z-index，但我不能。

因为如果我使用z-index, 并且.textview出现。但是它.mappanel也占据了父级的整个宽度，而我只是想要它占据 lefe 空间。

也就是说，如果两个元素的父 div 有一个宽度：600px，那么.mappanel就会有 (600-380)px；

4

1 回答 1

0

这是一个z-index问题。您的.textview面板出现在您的.mappanel. 这是因为您已经为它们定义了一个position，这将为它们提供一个默认值z-index。并且因为在代码中出现.mappanel在后面.textview，所以它会出现在上面。

试试这个：

CSS

.textview {
    width: 380px;
    position:relative;
    z-index: 1;
    top: 0px;
    float:right;
    height: 535px;
    background: #cc0000;
}
.mappanel {
    position:relative;
    z-index: 0;
    background: #0000cc;
    height: 535px;
    margin-right: 380px;
}

演示

更新 1

要将非浮动面板的宽度固定为不低于浮动面板，您可以在其右侧添加边距：

    margin-right: 380px;

如果您想看到它运行，我已经更新了上面的演示。

于 2012-12-20T00:30:24.183 回答