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.
27 lines
1.3 KiB
27 lines
1.3 KiB
3 months ago
|
<!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>
|