HTML/CSS/Layout/position static

Содержание

1 Elements flow automatically one after the other in lines and blocks
2 setting width to a value, margin-left to auto, and margin-right to auto centers a static block
3 Sized Static Block centered aligned
4 Sized Static Block left offset
5 Stacking Context
6 static position and relative position
7 Static Positioned
8 Stretched Absolute
9 Stretched Static Block center aligned
10 Stretched Static Block left offset
11 use position:static to unposition an element so that it is rendered normally in the flow.
12 Using Static Positioning
13 width:auto stretches a static block

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>

HTML/CSS/Layout/position static

Содержание

Elements flow automatically one after the other in lines and blocks

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

Sized Static Block centered aligned

Sized Static Block left offset

Stacking Context

static position and relative position

Static Positioned

Stretched Absolute

Stretched Static Block center aligned

Stretched Static Block left offset

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

Using Static Positioning

width:auto stretches a static block

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты