HTML/CSS/Layout/position relative

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

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

  1. wrapper{
 position:relative;
 width:70%;
 background:#ccc;
 position:relative;
 border:1px solid #000;
 height:200px;

}

  1. test{
   position:absolute;
   left:50%;

}

  1. testinner{
 position:relative;
 left:-50%;
 background:#aaa;
 border:1px solid #000;

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

This is some content width no specified width
for testing purposes

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

Before Relative Positioning

Static Block Static Inline on top

Static Block on top

Absolute

After Relative Positioning

Relative Block Relative Inline on top

Relative Block on top

Absolute

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

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

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

this is a test. this is a test. 

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

           div1

               div2

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

Positioned

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

           This is the text of the first div.
           This is the text of the first div.

          This is the text of the second div.
          This is the text of the second 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>

one. top of the page.

two. middle of the page.

three. bottom of the page.

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

this is a test. is in superscript.

this is a test. is in subscript.

this is a test. is shifted left.

this is a test. is shifted right.

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

Absolute
Fixed

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

1
2
3
4

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

1
2
3
4

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

This element is offset from its original position. 

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

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

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

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

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

Container 1

Container 2

Container 3 

 </body>

</html> 

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