You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
1.5 KiB
26 lines
1.5 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<link href="relative.css" rel="stylesheet"> |
|
<title>Relative Postioning</title> |
|
</head> |
|
|
|
<body> |
|
<p>Boxes 1 to 3 are positioned according to the normal flow.</p> |
|
<div id="box1" class="box">Box 1</div> |
|
<div id="box2" class="box">Box 2</div> |
|
<div id="box3" class="box">Box 3</div> |
|
|
|
<p>Boxes 2 to 3 are positioned according to the normal flow, but box one has a position attribute with a left value of 0 pixels and a top value of 0 pixels. Note that this is the same as if it were not being positioned so it seems that it is positioned relative to its expected position if we hadn't not specified the position attribute.</p> |
|
<div id="box4" class="box">Box 1</div> |
|
<div id="box2" class="box">Box 2</div> |
|
<div id="box3" class="box">Box 3</div> |
|
|
|
<p>Again, boxes 2 to 3 are positioned according to the normal flow, but box one has a position attribute with a left value of 400 pixels and a top value of 200 pixels. We can see that the box has moved over to the left and down, relative to where it would ordinarily be if we didn't specify a position attribute, in other words, where it would be if it were following the default flow. Note that the other blocks have not moved to occupy the space which box 1 occupied previously.</p> |
|
<div id="box5" class="box">Box 1</div> |
|
<div id="box2" class="box">Box 2</div> |
|
<div id="box3" class="box">Box 3</div> |
|
<p>Note that the posisitons are all expressed from the left and the top of the viewport.</p> |
|
</body> |
|
</html>
|
|
|