Question

经过多次尝试后，我现在有点迷失了。我有两列布局。

HTML：

...
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

两者（左和右）都有固定的宽度，例如700px。我想让他们做的是，当视口宽度小于1400px时，右侧div应覆盖左侧div。我成功地用位置做了：左边的div是绝对的，右边的div是浮动的。但这只有在右div的高度大于左div时才有效。

如果需要，我可以添加图片。任何帮助或提示都会很棒。谢谢。

更新

我必须支持ie8 +。并且两个div都应该是可见的。我添加了一张图片，希望它能让我的要求更加清晰。

enter image description here

更新2：

我创建了一个jsbin来展示我想要实现的目标。现在它是位置绝对解决方案，但正如我所说，当位置绝对div的内容大于其他浮动div时，它不起作用（参见jsbin）。你必须在一个额外的选项卡中启动jsbin输出。然后减小窗口宽度以查看所需的效果。

JSBIN

Answer 1

您可以使用条件css：

<html>
<style>
#left{
    width:700px;
    background-color:red;
    float:left;
}
#right{
    width:700px;
    background-color:blue;
    float:left;
}

@media (max-width: 1400px) { 
    #left{
        position:absolute;
        z-index:1;
    }
    #right{
        position:absolute;
        z-index:5;
    }
}
</style>
<body>
<div id="wrapper">
  <div id="left">a</div>
  <div id="right">a</div>
</div>
</body>
</html>

Answer 2

你的叠加定义有点粗糙，

也许你的意思是这个？

HTML

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS

#wrapper {
    position: relative;
    max-width: 1400px; 
}

#left, #right {
    position: absolute;
    width: 700px;
    height: 400px; //or whatever
    overflow: auto;
}

#left {
    background-color: black;
    left: 0;
}

#right  {
    background-color: grey;
    right: 0;
    z-index: 1;
}

编辑：通过滚动添加固定高度。

CSS - 两个Div重叠，两者都有固定的宽度

2 个答案: