绝对定位的DIV不停留在相对定位的DIV父

我已经将我的问题简化为一个简单示例。我有多个position:relative div容器，让我们说检查，每页一个。我使用position:absolute div来检查支票上的数据。第一次检查时布局良好，但所有以下检查数据覆盖第一次检查。在这个例子中，支票号码全部在第一个框的右上方。在我的其中一项测试中，它在print preview中看起来不错，但不在屏幕上。我已经在IE和Firefox中进行了测试。绝对定位的DIV不停留在相对定位的DIV父

<!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>

来源

2014-09-03 Keith Thompson

'的位置是：你做relitive'是拼写错误？ – 2014-09-03 06:39:13

它是'相对'而不是'可靠'。这是你的问题单独或在你的代码中的错字？ – Bojangles 2014-09-03 06:39:18

我花了数小时看代码。不知道我何时介绍拼写错误。 – 2014-09-03 15:45:26

您有拼写错误relitive。它应该是relative这样的：

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

能正确运行这表现在这个小提琴：

http://jsfiddle.net/jfngyu75/

来源

2014-09-03 06:50:54

第二组眼睛可以捕捉简单的事物。拼写错误一旦被复制并粘贴。当我删除内联样式时，我必须完成那些试图清理我的样式表的操作。谢谢你的收获。 – 2014-09-03 15:41:09

绝对定位的DIV不停留在相对定位的DIV父

回答

相关问题