HTML/CSS/Layout/position
Содержание
CSS provides six positioning models for positioning an element: static, absolute, fixed, relative, float, and relative float.
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>
<div class="section">
<p class="static centered" >
<span class="static centered">Static</span>
<span class="absolute">Absolute</span>
<span class="fixed">Fixed</span>
<span class="relative">Relative</span>
<span class="float">Float</span>
<span class="relative float">Relative Float</span>
</p>
</div>
</body>
</html>
Normal Flow
<?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>
<p><b>one</b>. top of the page.</p>
<p><b>two</b>. middle of the page.</p>
<p><b>three</b>. bottom of the page.</p>
</body>
</html>
position descendant
<!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>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
</body>
</html>
Relative position image
<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" />
<p>This is a test.</p>
</body>
</html>
The position Property
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.