HTML/CSS/Layout/position absolute
Содержание
- 1 Absolute Box
- 2 Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container.
- 3 Absolutely positioned Elements are positioned relative to the browser"s viewport.
- 4 absolute positioning
- 5 absolute positioning for header panel
- 6 Absolute positioning of elements
- 7 Absolute position is in a relative position
- 8 Absolute
- 8.1 absolute position offset
- 8.2 absolute position offset: bottom left
- 8.3 absolute position offset: bottom right
- 8.4 absolute position offset: no-width, no-height
- 8.5 absolute position: offset right
- 8.6 absolute position offset: top right bottom left
- 8.7 Absolute position to the bottom
- 8.8 An absolute element is removed from the normal flow and put in a layer above or below it.
- 8.9 left, right, top, and bottom applied to absolute boxes.
- 8.10 position: absolute and to the top 100px
- 8.11 position absolute offset
- 8.12 position absolute: offset bottom left
- 8.13 position absolute: offset bottom right
- 8.14 position absolute: offset no width, no height
- 8.15 position absolute: offset right
- 8.16 position absolute, offset, top, right, bottom, left
- 8.17 position:absolute positions an element from its location in the normal flow or from its nearest positioned ancestor.
- 8.18 Remove an element from the normal flow and move it into its own layer with absolute position.
- 8.19 Positioned Grandparent
- 8.20 Non-positioned Parent
- 8.21 Shrinkwrapped Absolute right offset
- 8.22 two block with position: absolute
- 8.23 Use absolute position to the right to layout the menu bar section
- 8.24 use absolute positiont to create a ladder layout
- 8.25 Use inline style to control the absolute position
- 8.26 Vertically Stretched Absolute
- 8.27 width, height: absolute positioning
Absolute Box
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: auto; left: 0; right: auto; top: 0; bottom: auto; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .before {
width: 100px; height: auto; left: 400px; right: auto; top: 100px; bottom: auto; background: yellow;
}
- .after {
width: 100px; height: auto; left: auto; right: 0px; top: auto; bottom: 0px; background: blue;
} </style> </head> <body>
</body> </html>
</source>
Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Relative Positioning</title> <style rel="stylesheet" type="text/css">
div {
background: yellow; border: 1px solid black; margin: 0 20px;
} div#relative {
position: relative; height: 200px;
} p#bottom-right {
margin: 0; background: gold; border: 1px solid crimson; height: 50px; width: 200px; position: absolute; bottom: 5px; right: 5px;
}
</style> </head> <body>
this is a test. this is a test.
</body>
</html>
</source>
Absolutely positioned Elements are positioned relative to the browser"s viewport.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Absolute Positioning</title> <style rel="stylesheet" type="text/css">
body {
background: yellowgreen;
} div {
position: absolute; background: yellow; padding: 5px; width: 100px; height: 100px;
} div#top-left {
top: 0; left: 0; border-right: 1px solid black; border-bottom: 1px solid black; background: pink;
}
</style> </head> <body>
Top, Left
</body>
</html>
</source>
absolute positioning
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>Absolute Positioning</title> <style rel="stylesheet" type="text/css">
div.page {
position: absolute; left: 50px; top: 100px;
} p {
background-color: red; width: 200px;
} p.two {
position: absolute; left: 50px; top: -25px; background: pink;
} </style> </head> <body>
b>one</b>This will be at the top of the page.
twoThis will be in the middle of the page.
threeThis will be at the bottom of the page.
</body> </html>
</source>
absolute positioning for header panel
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>Fixed Positioning</title> <style rel="stylesheet" type="text/css">
div.header {
position: fixed; top: 0px; left: 0px; width: 100%; color: red; background-color: pink;
} p {
width: 300px; padding: 5px; color: yellow; background-color: blue;
} p.one {
margin-top: 100px;
} </style> </head> <body>
<p>
</p>
</body> </html>
</source>
Absolute positioning of elements
<source lang="html4strict">
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Absolute Positioning</title> </head> <body>
<img src = "http://www.wbex.ru/style/logo.png" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image" />
Positioned Text
<img src = "http://www.wbex.ru/style/logo.png" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image" />
</body>
</html>
</source>
Absolute position is in a relative position
<source lang="html4strict">
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title></title> <style type="text/css">
- .positioned {
background: #ccc; position: relative;
}
- .absolute {
background: #aaa; position: absolute; top: 10px; left: 10px;
} </style>
</head> <body>
Absolute
Sized Absolute
</body>
</html>
</source>
absolute position offset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background: yellow; } div#div1 { top: 0; left: 0; } div#div2 { top: 20px; left: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
absolute position offset: bottom left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background: lightyellow; } div#div1 { bottom: 0; left: 0; } div#div2 { bottom: 20px; left: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
absolute position offset: bottom right
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background: lightyellow; } div#div1 { bottom: 0; right: 0; } div#div2 { bottom: 20px; right: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
absolute position offset: no-width, no-height
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; background: lightyellow; } div#div1 { top: 0; left: 0; } div#div2 { top: 20px; left: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
absolute position: offset right
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; background: lightyellow; } div#div1 { top: 0; right: 0; } div#div2 { top: 20px; right: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
absolute position offset: top right bottom left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; opacity: 0.7; background: lightyellow; } div#div1 { top: 0; right: 0; bottom: 0; left: 0; } div#div2 { top: 20px; right: 20px; bottom: 20px; left: 20px; } </style> </head> <body>
This is the text of the first div. This is the text of the first div.
This is the text of the second div. This is the text of the second div.
</body>
</html>
</source>
Absolute position to the bottom
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
}
.myStyle {
position: static; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
}
.different {
position: absolute; bottom: 25px; left: 25px; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
}
</style>
</head>
<body>
</body>
</html>
</source>
An absolute element is removed from the normal flow and put in a layer above or below it.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative;
}
- .box {
position: absolute; overflow: auto; left: 0; right: auto; top: 0; bottom: auto; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .before {
width: 100px; height: auto; left: 400px; right: auto; top: 100px; bottom: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
left, right, top, and bottom applied to absolute boxes.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative;
}
- .box {
position: absolute; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; width: 220px; height: 100px; background: red;
}
- .before {
z-index: 2; width: 100px; height: 400px; left: 400px; right: auto; top: 100px; bottom: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
position: absolute and to the top 100px
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Positioning</title> <style type="text/css">
- quote {
position: absolute; border: 2px dotted red; top: 100px; left: 50px; right: 100px;
} </style> </head> <body>
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
</body> </html>
</source>
position absolute offset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; padding: 10px; border: 1px solid black; opacity: 0.7; background: lightyellow; } #div1 { top: 0; left: 0; } #div2 { top: 20px; left: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position absolute: offset bottom left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { bottom: 0; left: 0; } #div2 { bottom: 20px; left: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position absolute: offset bottom right
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { bottom: 0; right: 0; } #div2 { bottom: 20px; right: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position absolute: offset no width, no height
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { top: 0; left: 0; } #div2 { top: 20px; left: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position absolute: offset right
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 150px; height: 150px; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { top: 0; right: 0; } #div2 { top: 20px; right: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position absolute, offset, top, right, bottom, left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { top: 0; right: 0; bottom: 0; left: 0; } #div2 { top: 20px; right: 20px; bottom: 20px; left: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position:absolute positions an element from its location in the normal flow or from its nearest positioned ancestor.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div,p,em {
margin: 10px; padding: 10px; background-color: white; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black;
}
- .pos {
position: absolute; left: 100px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>
Remove an element from the normal flow and move it into its own layer with absolute position.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen">
- in-place {
position: absolute; z-index: 1; background: red;
}
- shrinkwrapped {
position: absolute; z-index: 0; width: auto; left: 0; bottom: 0; margin: 0; background: blue;
}
- sized {
position: absolute; z-index: auto; width: 170px; height: 115px; bottom: 0; left: 270px; background: gold;
}
- stretched {
position: absolute; z-index: -1; height: auto; right: 0; top: 0; bottom: 0; background: pink;
} .grandContainer{
width: 800px; height: 800px; background: gray;
} .parent{
width: 600px; height: 600px; background: black; color: white;
} </style> </head> <body>
Positioned Grandparent
Non-positioned Parent
Absolute elements are positioned in their own layer in front of or behind the normal flow. In-place Absolute Sized Absolute
Stretched Absolute
Shrinkwrapped Absolute
</body> </html>
</source>
Shrinkwrapped Absolute right offset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css">
- .grandContainer {
position: relative; height: 295px; width: 600px; border: 2px solid black; background: red;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black; background: purple;
}
- .ex {
padding: 5px; border: 5px solid black;
} div.ex span {
margin-right: -60px; border: 1px dotted black;
} span.ex span {
margin-right: 30px; border: none; background-color: gold;
}
- myStyle {
position: absolute; top: 0; margin-top: 200px; width: auto; left: auto; margin-left: auto; right: 0; margin-right: -50px; background-color: gold;
} </style> </head> <body>
Shrinkwrapped Absolute: -50px
</body> </html>
</source>
two block with position: absolute
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; width: 200px; border: 1px solid black; background: #ccc; } </style> </head> <body>
Paragraph text.
Second div text.
</body>
</html>
</source>
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
color: #000; background-color: #ccc;
}
- content {
padding: 10px; margin: 5px 122px 5px 5px; background-color: #fff; border: 1px solid #000;
}
- menu {
position: absolute; top: 0px; right: 0px; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 90px;
}
</style>
</head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
use absolute positiont to create a ladder layout
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
}
- one {
position: absolute; top: 10px; left: 10px; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- two {
position: absolute; top: 40px; left: 40px; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
- three {
position: absolute; top: 70px; left: 70px; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- four {
position: absolute; top: 100px; left: 100px; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
</style>
</head> <body>
</body> </html>
</source>
Use inline style to control the absolute position
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Using Absolute Positioning</title> <style type="text/css" rel="stylesheet" >
p {
border-width: thin; border-style: solid; height: 100px; width: 100px; text-align:center
}
</style> </head> <body>
Container 1
Container 2
Container 3
</body>
</html>
</source>
Vertically Stretched Absolute
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- abs-v {
height: auto; top: 0; bottom: 0; position: absolute; background: gold;
} </style> </head> <body>
</body> </html>
</source>
width, height: absolute positioning
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { padding: 10px; margin: 10px; border: 1px solid black; background: lightgray; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html> </source>