css - 为什么position:relative无法按我的预期使用float

这是example，

注意.mappanel，它覆盖了浏览器的所有宽度，而我想在右侧显示.textview div。

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

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

在某个时候，.textview可以折叠，然后.mappanel占据所有宽度



更新：

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

因为如果使用z-index，则会出现.textview。但是.mappanel也会占用父级的整个宽度，而我只是希望它占用左侧空间。

也就是说，如果两个元素的父div的宽度为：600px，那么.mappanel将为（600-380）px；

最佳答案

这是一个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;
}

Demo

更新1

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

    margin-right: 380px;

如果您希望它运行，我已经更新了上面的演示。