Question

这是example，

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

当我删除该位置时：相对，它有效（虽然我无法删除position:relative两者。

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

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

更新

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

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

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

Answer 1

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

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

为什么这个职位：亲戚不像我预期的那样工作

1 个答案: