Admin: 1 версия

2010-05-26T08:16:47Z

1 версия

Новая страница

==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;
}
#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>
</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;
}
#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>
</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;
}
#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>
</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>
<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>
</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>
<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>
</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;
}
#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>
</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;
}
#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>
</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;
}
#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>
</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;
}
#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>
</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>
<div class="parent">Positioned parent
<div class="child">Non-positioned child </div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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;
}
#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>
</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;
}
#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>
</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;
}
#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>
</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>
<div class="parent">Parent
<p class="negativeMargin">Sized Block Outside Left</p>
</div>
</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>
<div class="parent">Parent
<p class="fullMargin">Sized Block Outside Right</p>
</div>
</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>
<div class="parent">Parent
<p class="negativeMargin">Sized Float Outside Left</p>
</div>
</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>
<div class="parent">Parent
<p class="fullMargin">Sized Float Outside Right</p>
</div>
</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;
}
#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>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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>
<div id="container">
<div id="one"></div>
</div>
</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;
}
#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>
</source>

HTML/CSS/Box Model/Box Layout - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)