Question

所有答案都没有帮助我。

#main {
  width: 300px;
  height: 400px;
  position: relative;
}
#main1 {
  position: absolute;
  float:left;
}
#main2 {
  position: absolute;
    overflow-y: scroll;
    height: inherit;
    float:left;
    width: 50%;
}

我希望main2位于main1。

之下

Answer 1

通过'under'，我假设你的意思是'落后'。为此，您需要添加z-index。 Z-index从零开始，因此只需让#main1 div z-index 1 #main1 { z-index: 1; }让它显示在“顶部”：

我创建了一个更新的小提琴here。

希望这有帮助！：）

Answer 2

不太清楚你需要什么，但你不能使用绝对浮动。如果删除两个上的绝对值，则滚动部分显示在另一个下面。

更新小提琴：https://jsfiddle.net/prg5hc9m/3/

#main {
  top: 20px;
  left: 20px;
  width: 300px;
  height: 400px;
  position: relative;
  display:block;
}

#main1 {
  float:left;
}

#main2 {
  clear:left;
    overflow-y: scroll;
    height: 300px;
    float:left;
    //top: 10%;
    width: 50%;
}

Answer 3

使用内联块。

#main {
  top: 20px;
  left: 20px;
  width: 300px;
  height: 400px;
  position: relative;
  display:block;

}

#main1 {
  display: inline-block;
  float:left;
  height: 50px;
}

#main2 {
  clear:left;
  display: inline-block;
    overflow-y: scroll;
    height: 300px;
    float:left;
    //top: 10%;
    width: 50%;
}

HTML：div下的div

3 个答案: