HTML/CSS/Layout/position relative
Содержание
- 1 Centre an element of no specified width
- 2
- 2.1 Control the stacking order of a float or an element in the normal flow.
- 2.2 element is positioned to the bottom left of the relatively positioned element.
- 2.3 Element is positioned to the bottom right of the relatively positioned element.
- 2.4 position relative and absolute
- 2.5 position:relative positions an element at an offset from its location in the normal flow.
- 2.6 position relative: top left
- 2.7 relative positioning
- 2.8 Relative positioning of elements
- 2.9 Relative positioning uses left, top, and z-index to control the offset of the box.
- 2.10 relative position to the bottom and left
- 2.11 Relative position to the right and top
- 2.12 This element is offset from its original position.
- 2.13 This element is positioned to the top left of the relatively positioned element.
- 2.14 This element is positioned to the top right of the relatively positioned element.
- 2.15 Using Relative Positioning
Centre an element of no specified width
<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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">
- wrapper{
position:relative; width:70%; background:#ccc; position:relative; border:1px solid #000; height:200px;
}
- test{
position:absolute; left:50%;
}
- testinner{
position:relative; left:-50%; background:#aaa; border:1px solid #000;
} </style> </head> <body>
This is some content width no specified width
for testing purposes
</body> </html>
</source>
Control the stacking order of a float or an element in the normal flow.
<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">
- .ontop {
z-index: 1; background: red;
}
- .static {
position: static; background: yellow;
}
- .relative {
position: relative; background: gold;
}
- .absolute {
position: absolute; z-index: auto; background: blue; color: white;
}
- .offset {
left: 20px; top: auto; background: pink;
} </style> </head> <body>
Static Block Static Inline on top
Static Block on top
Absolute
Relative Block Relative Inline on top
Relative Block on top
Absolute
</body> </html>
</source>
element is positioned to the bottom left of the relatively positioned element.
<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; left: 5px;
}
</style> </head> <body>
This element is positioned to the bottom left of the relatively positioned element.
</body>
</html>
</source>
Element is positioned to the bottom right of the relatively positioned element.
<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>
position relative and 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 { padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { position: relative; margin: 50px; } #div2 { position: absolute; top: 20px; left: 20px; } </style> </head> <body>
div1
div2
</body>
</html>
</source>
position:relative positions an element at an offset from its location in the normal flow.
<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;
}
- .pos {
position: relative; left: 100px;
}
</style> </head> <body>
Positioned
</body> </html>
</source>
position relative: top 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: relative; padding: 10px; border: 1px solid black; opacity: 0.7; background: #ccc; } #div1 { top: 0; left: 0; } #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>
relative 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>Relative Positioning</title> <style rel="stylesheet" type="text/css">
p {
padding: 5px; width: 200px; background-color: red;
} p.two {
position: relative; left: 40px; top: -40px; background: pink;
} </style> </head> <body>
one. top of the page.
two. middle of the page.
three. bottom of the page.
</body> </html>
</source>
Relative 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>Relative Positioning</title> <style type = "text/css"> p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size: .6em; height: 1em } .super { position: relative; top: -1ex } .sub { position: relative; bottom: -1ex } .shiftleft { position: relative; left: -1ex } .shiftright { position: relative; right: -1ex } </style> </head> <body>
this is a test. is in superscript.
this is a test. is in subscript.
this is a test. is shifted left.
this is a test. is shifted right.
</body>
</html>
</source>
Relative positioning uses left, top, and z-index to control the offset of the 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"> .section{
position: relative; width: 600px; height: 600px; background: gray;
}
- .absolute {
position: absolute; top: 20px; left: 215px; background: yellow; width: auto;
}
- .fixed {
position: relative; left: 20px; right: 5px; background: gold;
} </style> </head> <body>
</body> </html>
</source>
relative position to the bottom and left
<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: relative; bottom: 25px; left: 25px; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
}
</style>
</head>
<body>
</body>
</html>
</source>
Relative position to the right and top
<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; top: 25px; right: 25px; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
}
</style>
</head>
<body>
</body>
</html>
</source>
This element is offset from its original 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>Relative Positioning</title> <style rel="stylesheet" type="text/css">
div {
background: yellow; border: 1px solid black; margin: 0 20px;
} p#offset {
margin: 0; background: pink; border: 1px solid crimson; position: relative; top: 10px; left: 10px;
}
</style> </head> <body>
This element is offset from its original position.
</body>
</html>
</source>
This element is positioned to the top left of the relatively positioned element.
<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; top: 5px; left: 5px;
}
</style> </head> <body>
This element is positioned to the top left of the relatively positioned element.
</body>
</html>
</source>
This element is positioned to the top right of the relatively positioned element.
<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; top: 5px; right: 5px;
}
</style> </head> <body>
This element is positioned to the top right of the relatively positioned element.
</body>
</html>
</source>
Using Relative 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>Using Relative Positioning</title> <style type="text/css" rel="stylesheet">
p {
border-width: thin; border-style: solid; height: 100px; width: 100px; text-align:center
} p.red {
background-color: red; position: relative; left: 0;
} p.white {
background-color: white; position: relative; top: -100px; left: 50px;
} p.blue {
background-color: blue; position: relative; top: -200px; left: 100px;
}
</style> </head> <body>
Container 1
Container 2
Container 3
</body>
</html>
</source>