絕對定位的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父

回答

相關問題