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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Non-positioned Parent

Sized Static Block

Stretched Static Block

Shrinkwrapped Static Inline

   Shrinkwrapped Static Inline

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

static

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

Sized Static Block

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

Sized Static Block: +50px

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

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

Background and Borders of Stacking Context #1 z-index:2

Absolute z-index:-999

Static Block

Static Float

Static Span

Relative Span z-index:0 Absolute z-index:999

this is a test. this is a test.

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

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

1

2

3

4

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

Static Positioned

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

Stretched Static Block

       Stretched Absolute

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

Stretched Static Block

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

Stretched Static Block: +50px

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

Static Positioned

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

Container 1

Container 2

Container 3

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

Static Absolute Fixed Relative Float Relative Float

</body> </html>

</source>

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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты