Css 为什么位置：relative不能像我预期的那样使用float

这是

请注意

.mappanel

，它覆盖了浏览器的所有宽度，而我希望在右侧显示

.textview

div

当我删除position:relative时，它起作用了（而我无法同时删除

position:relative

）

事实上，我想要的是

.textview

采用固定宽度（在我的示例中为380），而

.mappanel

采用左侧

在某个时刻，

.textview

可能会折叠，然后

.mappanel

占据所有宽度

---

更新：

有人建议我使用

z-index

，但我不能

因为如果我使用

z-index

，就会出现

.textview

。但是

.mappanel

也会占用父对象的整个宽度，而我只是希望它占用lefe空间

---

也就是说，如果两个元素的父div的宽度为600px，那么

.mappanel

将具有（600-380）px；

这是一个

z-index

问题。你的

.textview

面板出现在你的

.mappanel

下面。这是因为你为他们定义了一个

位置

，这将给他们一个默认的

z-index

。而且因为

.mappanel

在

.textview

之后，在代码中，它是将出现在上面

试试这个：

CSS

.textview{
宽度：380px；
位置：相对位置；
z指数：1；
顶部：0px；
浮动：对；
身高：535px；
背景：#cc0000；
}
.mappanel{
位置：相对位置；
z指数：0；
背景：#0000cc；
身高：535px；
右边距：380px；
}

更新1

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

    margin-right: 380px;

---

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

@hguser-我已经添加到我的答案中，以回答这个问题。请看一看