Question

这是我的html
a.html

<div class='main'>
  <div class="sub1"></div>
  <div class="sub2"></div>
</div>

和css：
a.css

.main {
  width: 200px;
  height: 400px;
  margin-left: 100px;
  position: relative;
  border: 1px solid red;
}

.sub1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
  left: 0px;
}

.sub2 {
  width: 50px;
  height: 300px;
  position: absolute;
  top: 30px;
  left: 20px;
  border: 1px solid green;
}

现在我希望div.sub1相对于父div，
和div.sub2相对于浏览器，
如何将样式设置为div.sub2？

Answer 1

据我所知，有两种可能的解决方案是将第二个div放在父div之外。这样.sub2将不会成为父div的子项。

或者制作第二个div position:fixed而不是绝对。

.sub2 {
  width: 50px;
  height: 300px;
  position: fixed;
  top: 30px;
  left: 20px;
  border: 1px solid green;
}

<强> Fiddle

Answer 2

您需要将.sub1 position设为relative（而不是absolute）。

.sub1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  left: 0px;
}

我希望这会有所帮助。

两个子div，一个postion相对父div，另一个相对浏览器？

2 个答案: