Absolutely positioned DIV not staying in the relatively positioned DIV parent
Question
I have reduced my problem to a simple example. I have multiple position:relative div containers, lets say checks, one per page. I lay out the data on the check using position:absolute div's. The layout is fine on the first check but all the following check data overlays the first check. In this example, the check numbers are all on the first box upper right. In one of my tests it looked OK in print preview but not on the screen. I have tested in both IE and 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>
1 answers
solution1
0 2014-09-03 06:50:54
You have misspelt relitive . It should be relative like this:
.check {
position : relative;
width : 200mm;
height: 2.5in;
border : 1px solid Black;
}
That works correctly as demonstrated by this fiddle:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.