HTML/CSS/Layout/position static

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Elements flow automatically one after the other in lines and blocks

 

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



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

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



Sized Static Block centered aligned

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



Sized Static Block left offset

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



Stacking Context

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



static position and relative position

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



Static Positioned

 

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



Stretched Absolute

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



Stretched Static Block center aligned

 

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



Stretched Static Block left offset

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



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

 
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>



Using Static Positioning

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



width:auto stretches a static block

 
<!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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/position_static&oldid=5019»