HTML/CSS/Layout/position relative

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

Centre an element of no specified width

 

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



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

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



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

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



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

 

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



position relative and absolute

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



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

 

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



position relative: top left

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



relative positioning

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



Relative positioning of elements

 

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



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

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



relative position to the bottom and left

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



Relative position to the right and top

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



This element is offset from its original 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" 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>



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

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



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

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



Using Relative Positioning

 
<!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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/position_relative&oldid=5020»