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.3 KiB
26 lines
1.3 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<link href="absolute.css" rel="stylesheet"> |
|
<title>Absolute 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 300 pixels and a top value of 500 pixels. Because the position is absolute, it doesn't relate to any other elements on the page.</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 100 pixels and a top value of 800 pixels. Because the position is absolute, it doesn't relate to any other elements on the page.</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. When box 1 is moved, the other boxes move to occupt the space that it created by taking itself out of the normal flow of elements.</p> |
|
</body> |
|
</html>
|
|
|