Question

我把问题简化为一个简单的例子。我有多个position:relative div容器，让我们说支票，每页一个。我使用position:absolute div来列出支票上的数据。第一次检查时布局正常，但所有以下检查数据都覆盖了第一次检查。在此示例中，支票号码全部位于右上角的第一个框中。在我的一个测试中，它在print preview中看起来没问题，但在屏幕上却没有。我已经在IE和Firefox中进行了测试。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .check {
        position : relitive;
        width : 200mm;
        height: 2.5in;
        border : 1px solid Black;
    }
  </style>
</head>
<body>
   <div id="Check608" class="check" >
      <div style="height: 100%; background: #ee3e64;">Check 1</div>
      <div style="position: absolute; top: 8mm; left: 175mm;">608</div>
   </div>
   <div id="Check609" class="check" >
      <div style="height: 100%; background: #44accf;">Check 2</div>
      <div style="position: absolute; top: 12mm; left: 175mm;">609</div>
   </div>
   <div id="Check610" class="check" >
      <div style="height: 100%; background: #b7d84b;">Check 3</div>
      <div style="position: absolute; top: 16mm; left: 175mm;">610</div>
   </div>
</body>
</html>

Answer 1

你有拼错relitive。这应该是relative：

.check {
        position : relative;
        width : 200mm;
        height: 2.5in;
        border : 1px solid Black;
}

正如这个小提琴所证明的那样：

http://jsfiddle.net/jfngyu75/

绝对定位的DIV不会停留在相对定位的DIV父母身上

1 个答案: