HTML/CSS/Box Model/top — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 09:21, 26 мая 2010
Содержание
- 1 Absolute Outside its parent on the Bottom Left with 100% top
- 2 Absolute position with top, right and bottom
- 3 Body top left position
- 4 Offset Relative
- 5 position: relative and top left offset
- 6 Relative block to top and left
- 7 Relative negative top offset
- 8 Relative offset indent
- 9 top: -100px
- 10 top aligns the top side of an absolute element to the top side of its container.
- 11 Use "top" to offset the top of an element from the top of its position.
- 12 When the top and bottom offset properties are applied to the same element, height is implied.
Absolute Outside its parent on the Bottom Left with 100% top
<!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">
* .parent {
left: 300px;
top: 300px;
position: relative;
height: 140px;
width: 200px;
background: black;
}
* .bottom {
position: absolute;
top: 100%;
margin-top: 5px;
background: red;
}
* .left {
position: absolute;
right: 100%;
margin-right: 5px;
background: red;
}
</style>
</head>
<body>
<div class="parent">Parent
<p class="bottom left">Absolute Outside Bottom Left</p>
</div>
</body>
</html>
Absolute position with top, right and bottom
<!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>vertically stretching content</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
margin: 0;
padding: 0;
}
p {
background: pink;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
p#absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p id="absolute">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</body>
</html>
Body top left position
<!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">
html, body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Nulla cursus semper metus</h2>
<h3>Nam enim</h2>
<p>this is a test.</p>
</body>
</html>
Offset Relative
<!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">
.parent {
width: 600px;
height: 600px;
background: black;
}
* .float {
float: left;
width: 90px;
height: 40px;
background: yellow;
}
* .relative {
position: relative;
background: purple;
}
* .offset1 {
left: 0px;
top: -12px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<p class="relative offset">
this is a test. this is a test.
<span class="relative offset1"> this is a test. </span>
this is a test. </p>
</div>
</body>
</html>
position: relative and top left offset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
border: 1px solid #000000;
margin: 5px;
width: 300px;
}
div#page2 {
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="page1">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
<div id="page2">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
</body>
</html>
Relative block to top and left
<!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>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
margin: 50px;
border: 1px solid rgb(200, 200, 200);
padding: 0;
}
p#relative {
background: pink;
border: 1px solid rgb(200, 200, 200);
padding: 5px;
background: lightblue;
position: relative;
top: 25px;
left: 25px;
margin: 0;
} </style>
</head>
<body>
<p id="relative">
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
</body>
</html>
Relative negative top offset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
border: 1px solid #000;
margin: 5px;
}
div {
width: 350px;
}
p {
width: 300px;
}
div#page2 {
position: relative;
top: -100px;
left: 20px;
}
</style>
</head>
<body>
<div id="page1">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
<div id="page2">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
</body>
</html>
Relative offset indent
<!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">
.parent {
width: 600px;
height: 600px;
background: black;
}
* .indented {
margin-left: 60px;
margin-right: 60px;
background: gold;
}
* .relative {
position: relative;
background: purple;
}
* .offset4 {
left: 0px;
top: -32px;
background: white;
color: black;
}
</style>
</head>
<body>
<div class="parent">
<p class="relative offset4 indented">Indented Static Block </p>
</div>
</body>
</html>
top: -100px
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
font-family: arial, verdana, sans-serif;
border: 1px solid #000000;
margin: 5px;
}
div {
width: 350px;
}
p {
width: 300px;
}
div#page2 {
position: relative;
top: -100px;
left: 20px;
}
</style>
</head>
<body>
<div id="page1">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
<div id="page2">
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
</body>
</html>
top aligns the top side of an absolute element to the top side of its container.
<!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: 1;
right: 300px;
top: 300px;
bottom: auto;
width: 220px;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .before {
z-index: 2;
width: 100px;
height: 400px;
left: 400px;
right: auto;
top: 100px;
bottom: auto;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>
Use "top" to offset the top of an element from the top of its position.
<!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: relative;
top: -10px;
}
</style>
</head>
<body>
<div class="relative">
<p class="pos">Positioned</p>
</div>
</body>
</html>
When the top and bottom offset properties are applied to the same element, height is implied.
<!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>Opposing Offset Properties</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid rgb(128, 128, 128);
position: absolute;
width: 600px;
height: 600px;
}
p#offset-y {
margin: 0;
padding: 5px;
border: 1px solid black;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
width: 100px;
background: khaki;
}
</style>
</head>
<body>
<div>
<p id="offset-y">
When the top and bottom offset properties are applied to the same
element, height is implied.
</p>
</div>
</body>
</html>