HTML/CSS/Box Model/Box Layout

Материал из Web эксперт
Перейти к: навигация, поиск

Horizontally Stretched Absolute

   <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">
  • .grandContainer {
 position: relative;
 z-index: 10;
 background: red;

}

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

Positioned Grandparent
Non-positioned Parent 
   Horizontally Stretched Absolute

</body> </html> 

</source>


Horizontally Stretched Static

   <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">
  • .grandContainer {
 position: relative;
 z-index: 10;
 background: red;

}

  1. hss {
 position: static;
 width: auto;
 margin-left: 30px;
 margin-right: 30px;
 height: auto;
 margin-top: auto;
 margin-bottom: 20px;
 background: pink;

} </style> </head> <body>

Positioned Grandparent
Non-positioned Parent
Horizontally Stretched Static

</body> </html> 

</source>


Indent the left and right sides of a static element

   <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">
  • .grandContainer {
 position: relative;
 z-index: 10;
 background: red;

}

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

Positioned Grandparent
Non-positioned Parent 
   Horizontally Stretched Absolute

</body> </html> 

</source>


Indent up and down with margin

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

Moved-down Static Block
Moved-up Static Block
Push-down Static Block
Pull-up Static Block
None

</body> </html> 

</source>


Move right and left with margin

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

   Moved-left  
   Moved-right  
   Push-right 
   Pull-left 
   None

</body> </html> 

</source>


Offset Absolute and Offset Fixed

   <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"> .grandContainer { 

 width: 800px;
 height: 800px;
 background: red;

}

  1. absolute {
 position: absolute;
 width: 140px;
 height: auto;
 background: gold;

}

  1. fixed {
 position: fixed;
 height: 50px;
 margin-top: 10px;
 width: auto;
 margin-left: 10px;
 background: yellow;

} </style> </head> <body>

Absolute

outside spanFixed

</div> </body> </html> 

</source>


Parent position: absolute, child position fixed or absolute

   <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"> .grandContainer { 

 width: 800px;
 height: 800px;
 background: red;
 position: absolute;

}

  1. absolute {
 position: absolute;
 width: 140px;
 height: auto;
 background: gold;

}

  1. fixed {
 position: fixed;
 height: 50px;
 margin-top: 10px;
 width: auto;
 margin-left: 10px;
 background: yellow;

} </style> </head> <body>

Absolute

outside spanFixed

</div> </body> </html> 

</source>


Parent position: absolute, child position: relative or static

   <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"> .grandContainer { 

 width: 800px;
 height: 800px;
 background: red;
 position: absolute;

}

  1. absolute {
 position: relative;
 width: 140px;
 height: auto;
 background: gold;

}

  1. fixed {
 position: static;
 height: 50px;
 margin-top: 10px;
 width: auto;
 margin-left: 10px;
 background: yellow;

} </style> </head> <body>

Absolute

outside spanFixed

</div> </body> </html> 

</source>


Parent position: relative, child position fixed or absolute

   <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"> .grandContainer { 

 width: 800px;
 height: 800px;
 background: red;
 position: relative;

}

  1. absolute {
 position: absolute;
 width: 140px;
 height: auto;
 background: gold;

}

  1. fixed {
 position: fixed;
 height: 50px;
 margin-top: 10px;
 width: auto;
 margin-left: 10px;
 background: yellow;

} </style> </head> <body>

Absolute

outside spanFixed

</div> </body> </html> 

</source>


Positioned parent and non-position child

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

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

Positioned parent
Non-positioned child

</body> </html> 

</source>


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

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

   </body>

</html> 

</source>


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

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

   </body>

</html> 

</source>


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

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

   </body>

</html> 

</source>


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

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

   </body>

</html> 

</source>


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

}

  1. myStatic {
 position: static;
 text-align: left;
 margin-top: 5px;
 width: auto;
 margin-left: 0;
 margin-right: 0;
 background: yellow;

}

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

Positioned Grandparent
Non-positioned Parent
Stretched Static Block 
       Shrinkwrapped Absolute

</body> </html> 

</source>


Shrinkwrapped Relative

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

}

  1. myStatic {
 position: static;
 text-align: left;
 margin-top: 5px;
 width: auto;
 margin-left: 0;
 margin-right: 0;
 background: yellow;

}

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

Positioned Grandparent
Non-positioned Parent
Stretched Static Block 
       Shrinkwrapped Relative

</body> </html> 

</source>


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

}

  1. myStatic {
 position: static;
 text-align: left;
 margin-top: 5px;
 width: auto;
 margin-left: 0;
 margin-right: 0;
 background: yellow;

}

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

Positioned Grandparent
Non-positioned Parent
Stretched Static Block
Sized Absolute

</body> </html> 

</source>


Sized Block Outside to the Left of its parent

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

  • .parent {
   left: 300px;
   top: 300px;
 position: relative;
 height: 140px;
 width: 200px;
 background: black;

}

  • .negativeMargin {
 width: 220px;
 margin-left: -234px;
 background: red;

} </style> </head> <body>

Parent

Sized Block Outside Left

</body> </html> 

</source>


Sized Block Outside to the Right of its parent

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

  • .parent {
   left: 300px;
   top: 300px;
 position: relative;
 height: 140px;
 width: 200px;
 background: black;

}

  • .fullMargin {
 width: 220px;
 margin-left: 100%;
 background: red;

} </style> </head> <body>

Parent

Sized Block Outside Right

</body> </html> 

</source>


Sized Float Outside Left to its parent

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

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

Parent

Sized Float Outside Left

</body> </html> 

</source>


Sized Float Outside to the Right of its parent

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

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

Parent

Sized Float Outside Right

</body> </html> 

</source>


Sized relative

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

}

  1. myStatic {
 position: static;
 text-align: left;
 margin-top: 5px;
 width: auto;
 margin-left: 0;
 margin-right: 0;
 background: yellow;

}

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

Positioned Grandparent
Non-positioned Parent
Stretched Static Block
Sized relative

</body> </html> 

</source>


Static container and absolute child to top and left

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

   </body>

</html> 

</source>


Static positioned container with child to the bottom and left

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

   </body>

</html> 

</source>


Static positioned container with child to the bottom and right

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

   </body>

</html> 

</source>


Static postioned container and absolute child to the top and right

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

   </body>

</html> 

</source>


Vertically Stretched Absolute

   <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">
  • .grandContainer {
 position: relative;
 z-index: 10;
 background: red;

}

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

Positioned Grandparent
Non-positioned Parent
Vertically Stretched Absolute

</body> </html> 

</source>
Источник — «http://www.wbex.ru/index.php?title=HTML/CSS/Box_Model/Box_Layout&oldid=5313»