HTML/CSS/Layout/position
Содержание
CSS provides six positioning models for positioning an element: static, absolute, fixed, relative, float, and relative float.
<source lang="html4strict">
static can position inline, inline-block, block, and table elements. absolute and fixed can position any elements. float model can position float boxes. relative can position any type of box except for absolute boxes. relative-float can relatively position float boxes.
<!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: fix; width: 600px; height: 600px; background: gray;
}
- .centered {
width: 380px; margin-left: auto; margin-right: auto; background: red;
}
- .static {
position: static; background: blue;
}
- .absolute {
position: absolute; top: 20px; left: 215px; background: yellow
}
- .fixed {
position: fixed; bottom: 20px; right: 5px; background: gold;
}
- .relative {
position: relative; top: 20px; left: 30px; background: black;
}
- .float {
float: right; background:pink;
} </style> </head> <body>
Static Absolute Fixed Relative Float Relative Float
</body> </html>
</source>
Normal Flow
<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>Normal Flow</title> <style rel="stylesheet" type="text/css">
body {
color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px;
} p {
border-style: solid; border-color: #000000; border-width: 2px; padding: 5px; width: 200px; background-color: #FFFFFF;
} </style> </head> <body>
one. top of the page.
two. middle of the page.
three. bottom of the page.
</body> </html>
</source>
position descendant
<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>
Relative position image
<source lang="html4strict">
<html> <head> <title>Relative position image</title> <style type="text/css"> .relative {
position: relative; top: 100px; left: 20px;
} </style> </head> <body>
<img src="http://www.wbex.ru/style/logo.png" class="relative" alt="cover" />
This is a test.
</body> </html>
</source>
The position Property
<source lang="html4strict">
Value Meaning static same as normal flow, and is the default. relative box can be offset from where it would be in normal flow. absolute positioned exactly from the position in the containing element using x and y coordinates from the top-left corner of the containing element. fixed position is calculated from a fixed point; in the case of the browser this point is the top-left corner of a browser window and does not change position if the user scrolls the window.
</source>
