в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:15Z

1 версия

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

==Centre an element of no specified width==



<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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrapper{
position:relative;
width:70%;
background:#ccc;
position:relative;
border:1px solid #000;
height:200px;
}
#test{
position:absolute;
left:50%;
}
#testinner{
position:relative;
left:-50%;
background:#aaa;
border:1px solid #000;
}
</style>
</head>
<body>
<h1></h1>
<div id="wrapper">
<div id="test">
<div id="testinner">
<p>This is some content width no specified width<br />for testing purposes</p>
</div>
</div>
</div>
</body>
</html>
</source>

==Control the stacking order of a float or an element in the normal flow.==



<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">
* .ontop {
z-index: 1;
background: red;
}
* .static {
position: static;
background: yellow;
}
* .relative {
position: relative;
background: gold;
}
* .absolute {
position: absolute;
z-index: auto;
background: blue;
color: white;
}
* .offset {
left: 20px;
top: auto;
background: pink;
}
</style>
</head>
<body>
<div class="relative">Before Relative Positioning
<p class="static">Static Block
<span class="static ontop">Static Inline on top</span></p>
<p class="static ontop">Static Block on top</p>
<p class="absolute">Absolute</p></div>
<div class="relative">After Relative Positioning
<p class="relative">Relative Block
<span class="relative ontop offset">Relative Inline on top</span></p>
<p class="relative ontop">Relative Block on top</p>
<p class="absolute">Absolute</p>
</div>
</body>
</html>
</source>

==element is positioned to the bottom left of the relatively positioned element.==



<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>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}
div#relative {
position: relative;
height: 200px;
}
p#bottom-right {
margin: 0;
background: gold;
border: 1px solid crimson;
height: 50px;
width: 200px;
position: absolute;
bottom: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="relative">
<p id="bottom-right">
This element is positioned to the bottom left of the
relatively positioned element.
</p>
</div>
</body>
</html>
</source>

==Element is positioned to the bottom right of the relatively positioned element.==



<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>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}
div#relative {
position: relative;
height: 200px;
}
p#bottom-right {
margin: 0;
background: gold;
border: 1px solid crimson;
height: 50px;
width: 200px;
position: absolute;
bottom: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="relative">
<p id="bottom-right">
this is a test. this is a test.
</p>
</div>
</body>
</html>
</source>

==position relative and 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>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
border: 1px solid black;
opacity: 0.7;
background: #ccc;
}
#div1 {
position: relative;
margin: 50px;
}
#div2 {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
</body>
</html>
</source>

==position:relative positions an element at an offset from its location in the normal flow.==



<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;
}
* .pos {
position: relative;
left: 100px;
}

</style>
</head>
<body>
<div class="relative">
<p class="pos">Positioned</p>
</div>
</body>
</html>
</source>

==position relative: top 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>
<head>
<title></title>
<style type="text/css">
div {
position: relative;
padding: 10px;
border: 1px solid black;
opacity: 0.7;
background: #ccc;
}
#div1 {
top: 0;
left: 0;
}
#div2 {
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
This is the text of the first div.
This is the text of the first div.
</div>
<div id="div2">
This is the text of the second div.
This is the text of the second div.
</div>
</body>
</html>
</source>

==relative positioning==



<source lang="html4strict">

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
p {
padding: 5px;
width: 200px;
background-color: red;
}
p.two {
position: relative;
left: 40px;
top: -40px;
background: pink;
}
</style>
</head>
<body>
<p><b>one</b>. top of the page.</p>
<p class="two"><b>two</b>. middle of the page.</p>
<p><b>three</b>. bottom of the page.</p>
</body>
</html>
</source>

==Relative positioning of elements==



<source lang="html4strict">

<?xml version = "1.0"?>
<!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>Relative Positioning</title>
<style type = "text/css">
p { font-size: 1.3em;
font-family: verdana, arial, sans-serif }
span { color: red;
font-size: .6em;
height: 1em }
.super { position: relative;
top: -1ex }
.sub { position: relative;
bottom: -1ex }
.shiftleft { position: relative;
left: -1ex }
.shiftright { position: relative;
right: -1ex }
</style>
</head>
<body>
<p>this is a test.
<span class = "super">is in superscript</span>.</p>
<p>this is a test.
<span class = "sub">is in subscript</span>.</p>
<p>this is a test.
<span class = "shiftleft">is shifted left</span>.</p>

<p>this is a test.
<span class = "shiftright">is shifted right</span>.</p>
</body>
</html>
</source>

==Relative positioning uses left, top, and z-index to control the offset of the box.==



<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: relative;
width: 600px;
height: 600px;
background: gray;
}
* .absolute {
position: absolute;
top: 20px;
left: 215px;
background: yellow;
width: auto;
}
* .fixed {
position: relative;
left: 20px;
right: 5px;
background: gold;
}
</style>
</head>
<body>
<div class="section">
<p class="static centered" >
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
</p>
</div>
</body>
</html>
</source>

==relative position to the bottom and left==



<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">
<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;
bottom: 25px;
left: 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>
</source>

==Relative position to the right and top==



<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">
<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: absolute;
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>
</source>

==This element is offset from its original position.==



<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>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}
p#offset {
margin: 0;
background: pink;
border: 1px solid crimson;
position: relative;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div>
<p id="offset">
This element is offset from its original position.
</p>
</div>
</body>
</html>
</source>

==This element is positioned to the top left of the relatively positioned element.==



<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>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}
div#relative {
position: relative;
height: 200px;
}
p#bottom-right {
margin: 0;
background: gold;
border: 1px solid crimson;
height: 50px;
width: 200px;
position: absolute;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="relative">
<p id="bottom-right">
This element is positioned to the top left of the
relatively positioned element.
</p>
</div>
</body>
</html>
</source>

==This element is positioned to the top right of the relatively positioned element.==



<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>Relative Positioning</title>
<style rel="stylesheet" type="text/css">
div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}
div#relative {
position: relative;
height: 200px;
}
p#bottom-right {
margin: 0;
background: gold;
border: 1px solid crimson;
height: 50px;
width: 200px;
position: absolute;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="relative">
<p id="bottom-right">
This element is positioned to the top right of the
relatively positioned element.
</p>
</div>
</body>
</html>
</source>

==Using Relative 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>
<head>
<title>Using Relative 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;
position: relative;
left: 0;
}
p.white {
background-color: white;
position: relative;
top: -100px;
left: 50px;
}
p.blue {
background-color: blue;
position: relative;
top: -200px;
left: 100px;
}
</style>
</head>
<body>
<p class="red">
Container 1
</p>
<p class="white">
Container 2
</p>
<p class="blue">
Container 3
</p>
</body>
</html>
</source>

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

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

в 09:21, 26 мая 2010

Admin: 1 версия