HTML/CSS/Box Model/Box Layout

Содержание

1 Horizontally Stretched Absolute
2 Horizontally Stretched Static
3 Indent the left and right sides of a static element
4 Indent up and down with margin
5 Move right and left with margin
6 Offset Absolute and Offset Fixed
7 Parent position: absolute, child position fixed or absolute
8 Parent position: absolute, child position: relative or static
9 Parent position: relative, child position fixed or absolute
10 Positioned parent and non-position child
11 Relative positioned container with absolute positioned child to the bottom and left
12 Relative positioned container with absolute positioned child to the bottom and right
13 Relative positioned container with absolute positioned child to the top and left
14 Relative positioned container with absolute positioned child to the top and right
15 Shrinkwrapped Absolute
16 Shrinkwrapped Relative
17 Sized Absolute
18 Sized Block Outside to the Left of its parent
19 Sized Block Outside to the Right of its parent
20 Sized Float Outside Left to its parent
21 Sized Float Outside to the Right of its parent
22 Sized relative
23 Static container and absolute child to top and left
24 Static positioned container with child to the bottom and left
25 Static positioned container with child to the bottom and right
26 Static postioned container and absolute child to the top and right
27 Vertically Stretched Absolute

Horizontally Stretched Absolute

 
<!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">
* .grandContainer {
  position: relative;
  z-index: 10;
  background: red;
}
#hsa {
  position: absolute;
  width: auto;
  left: 0;
  margin-left: -30px;
  right: 0;
  margin-right: -30px;
  height: auto;
  top: auto;
  margin-top: 30px;
  bottom: auto;
  margin-bottom: auto;
  background: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="hsa" class="s">Horizontally Stretched Absolute</span> 
  </div> 
</div> 
</body>
</html>

Horizontally Stretched Static

 
<!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">
* .grandContainer {
  position: relative;
  z-index: 10;
  background: red;
}
#hss {
  position: static;
  width: auto;
  margin-left: 30px;
  margin-right: 30px;
  height: auto;
  margin-top: auto;
  margin-bottom: 20px;
  background: pink;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <div id="hss" class="s">Horizontally Stretched Static</div> 
  </div> 
</div> 
</body>
</html>

Indent the left and right sides of a static element

 
<!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">
* .grandContainer {
  position: relative;
  z-index: 10;
  background: red;
}
#hsa {
  position: static;
  width: auto;
  left: 0;
  margin-left: -30px;
  right: 0;
  margin-right: -30px;
  height: auto;
  top: auto;
  margin-top: 30px;
  bottom: auto;
  margin-bottom: auto;
  background: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="hsa" class="s">Horizontally Stretched Absolute</span> 
  </div> 
</div> 
</body>
</html>

Indent up and down with margin

 
<!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">
* .moved-left {
  margin-left: -26px;
  background: red;
}
* .push-right {
  margin-right: 50px;
    background: gold;
}
* .moved-right {
  margin-left: 50px;
  background: yellow;
}
* .pull-left {
  margin-right: -20px;
  background: blue;
  color: white;
}
* .moved-down {
  margin-top: 20px;
  background: red;
}
* .push-down {
  margin-bottom: 20px;
  background: gary;
}
* .moved-up {
  margin-top: -13px;
  background: yellow;
  
}
* .pull-up {
  margin-bottom: -16px;
    background: pink;
}
</style>
</head>
<body>
<div> 
    <div class="moved-down center">Moved-down Static Block </div> 
    <div class="moved-up center">Moved-up Static Block</div> 
    <div class="push-down center">Push-down Static Block</div> 
    <div class="pull-up center">Pull-up Static Block</div> 
    <div class="center">None</div> 
</div> 
</body>
</html>

Move right and left with margin

 
<!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">
* .moved-left {
  margin-left: -26px;
  background: red;
}
* .push-right {
  margin-right: 50px;
    background: gold;
}
* .moved-right {
  margin-left: 50px;
  background: yellow;
}
* .pull-left {
  margin-right: -20px;
  background: blue;
  color: white;
}
</style>
</head>
<body>
<div> 
    <span class="moved-left">Moved-left </span> 
    <span class="moved-right">Moved-right </span> 
    <span class="push-right">Push-right</span> 
    <span class="pull-left">Pull-left</span> 
    <em>None</em> 
</div> 
</body>
</html>

Offset Absolute and Offset Fixed

 
<!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">
.grandContainer {
  width: 800px;
  height: 800px;
  background: red;
}
#absolute {
  position: absolute;
  width: 140px;
  height: auto;
  background: gold;
}
#fixed {
  position: fixed;
  height: 50px;
  margin-top: 10px;
  width: auto;
  margin-left: 10px;
  background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">
<span id="absolute" class="border">Absolute</span> 
<p> outside span<span id="fixed" class="border">Fixed</span></p> 
</div> 
</div> 
</body>
</html>

Parent position: absolute, child position fixed or absolute

 

<!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">
.grandContainer {
  width: 800px;
  height: 800px;
  background: red;
  position: absolute;
}
#absolute {
  position: absolute;
  width: 140px;
  height: auto;
  background: gold;
}
#fixed {
  position: fixed;
  height: 50px;
  margin-top: 10px;
  width: auto;
  margin-left: 10px;
  background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">
<span id="absolute" class="border">Absolute</span> 
<p> outside span<span id="fixed" class="border">Fixed</span></p> 
</div> 
</div> 
</body>
</html>

Parent position: absolute, child position: relative or static

 

<!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">
.grandContainer {
  width: 800px;
  height: 800px;
  background: red;
  position: absolute;
}
#absolute {
  position: relative;
  width: 140px;
  height: auto;
  background: gold;
}
#fixed {
  position: static;
  height: 50px;
  margin-top: 10px;
  width: auto;
  margin-left: 10px;
  background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">
<span id="absolute" class="border">Absolute</span> 
<p> outside span<span id="fixed" class="border">Fixed</span></p> 
</div> 
</div> 
</body>
</html>

Parent position: relative, child position fixed or absolute

 

<!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">
.grandContainer {
  width: 800px;
  height: 800px;
  background: red;
  position: relative;
}
#absolute {
  position: absolute;
  width: 140px;
  height: auto;
  background: gold;
}
#fixed {
  position: fixed;
  height: 50px;
  margin-top: 10px;
  width: auto;
  margin-left: 10px;
  background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">
<span id="absolute" class="border">Absolute</span> 
<p> outside span<span id="fixed" class="border">Fixed</span></p> 
</div> 
</div> 
</body>
</html>

Positioned parent and non-position child

 
<!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">
* .parent {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
}
* .child{
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
}
</style>
</head>
<body>
<div class="parent">Positioned parent
  <div class="child">Non-positioned child </div>
</div> 
</body>
</html>

Relative positioned container with absolute positioned child to the bottom and left

 


<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    background: red;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: yellowgreen;
    bottom: 0;
    left: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Relative positioned container with absolute positioned child to the bottom and right

 


<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    background: red;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: orange;
    bottom: 0;
    right: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Relative positioned container with absolute positioned child to the top and left

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    background: red;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: pink;
    top: 0;
    left: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Relative positioned container with absolute positioned child to the top and right

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    background: red;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: lightblue;
    top: 0;
    right: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Shrinkwrapped 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;
}
#wa {
  position: absolute;
  text-align: left;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: 0;
  right: auto;
  margin-right: auto;
  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="wa" class="common">Shrinkwrapped Absolute</span> 
      </div>
  </div>
</div> 
</body>
</html>

Shrinkwrapped Relative

 
<!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;
}
#wa {
  position: relative;
  text-align: left;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: 0;
  right: auto;
  margin-right: auto;
  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="wa" class="common">Shrinkwrapped Relative</span> 
      </div>
  </div>
</div> 
</body>
</html>

Sized 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;
}
#myAbsolute {
  position: absolute;
  text-align: left;
  top: 0;
  margin-top: 155px;
  width: 400px;
  left: 0;
  margin-left: 0;
  right: auto;
  margin-right: auto;
  background: red;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
      <div id="myStatic" class="common">Stretched Static Block
        <div id="myAbsolute" class="common">Sized Absolute</div> 
      </div>
  </div>
</div> 
</body>
</html>

Sized Block Outside to the Left of its parent

 
<!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">
* .parent {
    left: 300px;
    top: 300px;
  position: relative;
  height: 140px;
  width: 200px;
  background: black;
}
* .negativeMargin {
  width: 220px;
  margin-left: -234px;
  background: red;
}
</style>
</head>
<body>
<div class="parent">Parent 
  <p class="negativeMargin">Sized Block Outside Left</p> 
</div> 
</body>
</html>

Sized Block Outside to the Right of its parent

 

<!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">
* .parent {
    left: 300px;
    top: 300px;
  position: relative;
  height: 140px;
  width: 200px;
  background: black;
}
* .fullMargin {
  width: 220px;
  margin-left: 100%;
  background: red;
}
</style>
</head>
<body>
<div class="parent">Parent 
  <p class="fullMargin">Sized Block Outside Right</p> 
</div> 
</body>
</html>

Sized Float Outside Left to its parent

 

<!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">
* .parent {
    left: 300px;
    top: 300px;
  position: relative;
  height: 140px;
  width: 200px;
  background: black;
}
* .negativeMargin {
  width: 220px;
  margin-left: -234px;
  float: left;
  background: red;
}

</style>
</head>
<body>
<div class="parent">Parent 
  <p class="negativeMargin">Sized Float Outside Left</p> 
</div> 
</body>
</html>

Sized Float Outside to the Right of its parent

 
<!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">
* .parent {
    left: 300px;
    top: 300px;
  position: relative;
  height: 140px;
  width: 200px;
  background: black;
}
* .fullMargin {
  width: 220px;
  margin-left: 100%;
  float: left;
  background: red;
}

</style>
</head>
<body>
<div class="parent">Parent 
  <p class="fullMargin">Sized Float Outside Right</p> 
</div> 
</body>
</html>

Sized relative

 
<!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;
}
#myAbsolute {
  position: relative;
  text-align: left;
  top: 0;
  margin-top: 155px;
  width: 400px;
  left: 0;
  margin-left: 0;
  right: auto;
  margin-right: auto;
  background: red;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
      <div id="myStatic" class="common">Stretched Static Block
        <div id="myAbsolute" class="common">Sized relative</div> 
      </div>
  </div>
</div> 
</body>
</html>

Static container and absolute child to top and left

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: static;
    width: 300px;
    height: 300px;
    margin: auto;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: pink;
    top: 0;
    left: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Static positioned container with child to the bottom and left

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: static;
    width: 300px;
    height: 300px;
    margin: auto;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: yellowgreen;
    bottom: 0;
    left: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Static positioned container with child to the bottom and right

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: static;
    width: 300px;
    height: 300px;
    margin: auto;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: orange;
    bottom: 0;
    right: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Static postioned container and absolute child to the top and right

 

<!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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div#container {
    position: static;
    width: 300px;
    height: 300px;
    margin: auto;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
    background: lightblue;
    top: 0;
    right: 0;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one"></div>
        </div>
    </body>
</html>

Vertically Stretched Absolute

 

<!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">
* .grandContainer {
  position: relative;
  z-index: 10;
  background: red;
}
#vsa {
  position: absolute;
  width: 120px;
  left: auto;
  margin-left: auto;
  right: 0;
  margin-right: 70px;
  height: auto;
  top: 0;
  margin-top: -30px;
  bottom: 0;
  margin-bottom: -30px;
  background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <div id="vsa" class="s">Vertically Stretched Absolute</div> 
  </div> 
</div> 
</body>
</html>

HTML/CSS/Box Model/Box Layout

Содержание

Horizontally Stretched Absolute

Horizontally Stretched Static

Indent the left and right sides of a static element

Indent up and down with margin

Move right and left with margin

Offset Absolute and Offset Fixed

Parent position: absolute, child position fixed or absolute

Parent position: absolute, child position: relative or static

Parent position: relative, child position fixed or absolute

Positioned parent and non-position child

Relative positioned container with absolute positioned child to the bottom and left

Relative positioned container with absolute positioned child to the bottom and right

Relative positioned container with absolute positioned child to the top and left

Relative positioned container with absolute positioned child to the top and right

Shrinkwrapped Absolute

Shrinkwrapped Relative

Sized Absolute

Sized Block Outside to the Left of its parent

Sized Block Outside to the Right of its parent

Sized Float Outside Left to its parent

Sized Float Outside to the Right of its parent

Sized relative

Static container and absolute child to top and left

Static positioned container with child to the bottom and left

Static positioned container with child to the bottom and right

Static postioned container and absolute child to the top and right

Vertically Stretched Absolute

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты