в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:15Z

1 версия

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

==Elements flow automatically one after the other in lines and blocks==



<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">
span {
position: static;
margin: 40px;
line-height: 32px;
padding: 3px;
border: 2px solid black;
background-color: yellow;
}
#sizedStaticBlock {
position: static;
width: 120px;
height: 100px;
margin: 10px auto;
background: red;

}
#myStyle {
position: static;
width: auto;
height: auto;
margin: 10px 50px;
background: blue;
}
.parent{
width: 600px;
height: 600px;
background: gold;
}
</style>
</head>
<body>
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="box">Sized Static Block </div>
<div id="myStyle" class="box">Stretched Static Block</div>
<div class="box"> <span>Shrinkwrapped Static Inline</span>
<span>Shrinkwrapped Static Inline</span>
</div>
</div>
</body>
</html>
</source>

==setting width to a value, margin-left to auto, and margin-right to auto centers a static block==



<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: static;
width: 600px;
height: 600px;
background: gray;
}
*.static {
position: static;
background: yellow;
margin-left: auto;
margin-right: auto;
width: 200px;
}
</style>
</head>
<body>
<div class="section">
<div class="static">static</div>
</div>
</body>
</html>
</source>

==Sized Static Block centered aligned==



<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
background: red;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#sizedStaticBlock {
position: static;
text-align: center;
margin-top: 5px;
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="example">Sized Static Block </div>
</div>
</div>
</body>
</html>
</source>

==Sized Static Block left offset==



<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
}
div.rumon span {
margin-left: -60px;
border: 1px dotted black;
}
span.rumon span {
margin-left: 30px;
border: none;
}
#sizedStaticBlock {
position: static;
text-align: left;
margin-top: 5px;
width: 400px;
margin-left: 50px;
margin-right: auto;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="common"><span>Sized Static Block: +50px</span></div>
</div>
</div>
</body>
</html>
</source>

==Stacking Context==



<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">
* .stacking-context1 {
z-index: 2;
position: absolute;
left: 10px;
top: 70px;
background: red;
}
* .stacking-context2 {
z-index: 1;
position: absolute;
left: 223px;
top: 120px;
background: gold;
}
* .level2 {
z-index: -999;
position: absolute;
background: blue;
}
* .level3 {
position: static;
background: yellow;
}
* .level4 {
float: left;
background: black;
}
* .level5 {
position: static;
background: pink;
}
* .level6 {
z-index: 0;
position: relative;
background: gray;
}
* .level7 {
z-index: 999;
position: absolute;
background: gold;
}
</style>
</head>
<body>
<div class="stacking-context1 box">
<div class="caption"> Background and Borders of Stacking Context #1 <code>z-index:2</code></div>
<span class="level2 box">Absolute <code>z-index:-999</code></span>
<div class="level3 box">Static Block<br />
<span class="level4 box">Static Float</span>
<span class="level5 box">Static Span</span><br /><p class="clear"></p>
<span class="level6 box">Relative Span <code>z-index:0</code></span>
<span class="level7 box">Absolute <code>z-index:999</code></span>
</div>
</div>
<div class="stacking-context2 box">this is a test. this is a test. </div>
</body>
</html>
</source>

==static position and relative position==



<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;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
</style>
</head>

<body>
<div class="different">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>

</html>
</source>

==Static Positioned==



<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;
}
* .static {
position: static;
}
* .relative {
position: relative;
left: auto;
top: auto;
bottom: auto;
right: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="relative">
<p class="static">Static Positioned</p>
</div>
</body>
</html>
</source>

==Stretched 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 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">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
background-color: gold;
}
#myStatic {
position: static;
text-align: left;
margin-top: 5px;
width: auto;
margin-left: 0;
margin-right: 0;
background: yellow;
}
#myStyle {
position: absolute;
text-align: left;
top: 0;
margin-top: 245px;
width: auto;
left: 0;
margin-left: 0;
right: 0;
margin-right: 0;
background: red;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="myStatic" class="common">Stretched Static Block
<span id="myStyle" class="common">Stretched Absolute</span>
</div>
</div>
</div>
</body>
</html>

</source>

==Stretched Static Block center aligned==



<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
background: red;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#myStyle {
position: static;
text-align: center;
margin-top: 5px;
width: auto;
margin-left: 70px;
margin-right: 70px;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="myStyle" class="example">Stretched Static Block</div>
</div>
</div>
</body>
</html>
</source>

==Stretched Static Block left offset==



<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
}
div.rumon span {
margin-left: -60px;
border: 1px dotted black;
}
span.rumon span {
margin-left: 30px;
border: none;
}
#myStatic {
position: static;
text-align: left;
margin-top: 5px;
width: auto;
margin-left: 50px;
margin-right: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="myStatic" class="common"><span>Stretched Static Block: +50px</span></div>
</div>
</div>
</body>
</html>
</source>

==use position:static to unposition an element so that it is rendered normally in the flow.==



<source lang="html4strict">

static is the default value for 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;
}
* .static {
position: static;
}
* .relative {
position: relative;
left: auto;
top: auto;
bottom: auto;
right: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="relative">
<p class="static">Static Positioned</p>
</div>
</body>
</html>
</source>

==Using Static 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Using Static 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;}
p.white {background-color: white;}
p.blue {background-color: blue}
</style>
</head>
<body>
<p class="red">
Container 1
</p>
<p class="white">
Container 2
</p>
<p class="blue">
Container 3
</p>
</body>
</html>
</source>

==width:auto stretches a static block==



<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: fix;
width: 600px;
height: 600px;
background: gray;
}
* .centered {
width: 380px;
background: red;
}
* .static {
position: static;
background: blue;
width: auto;
}
* .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>

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

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

в 09:21, 26 мая 2010

Admin: 1 версия