в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:17Z

1 версия

Новая страница

==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>
<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>
</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>
<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>
</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>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
</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" />
<p>This is a test.</p>

</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>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Layout/position - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия