HTML/CSS/Layout/position absolute — различия между версиями

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

Текущая версия на 08:16, 26 мая 2010

Содержание

Absolute 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">
* .container {
  position: relative;
}
* .box {
  position: absolute;
  overflow: auto;
  visibility: visible;
  z-index: auto;
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  width: 220px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .before {
  width: 100px;
  height: auto;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}
* .after {
  width: 100px;
  height: auto;
  left: auto;
  right: 0px;
  top: auto;
  bottom: 0px;
  background: blue;  
}
</style>
</head>
<body>

<div class="container"> 
    <div>BEFORE</div> 
    <div class="box before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
    <div class="box after">ABSOLUTE AFTER</div> 
    <div>AFTER</div> 
</div> 
</body>
</html>



Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container.

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



Absolutely positioned Elements are positioned relative to the browser"s viewport.

 
<!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>Absolute Positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: yellowgreen;
}
div {
    position: absolute;
    background: yellow;
    padding: 5px;
    width: 100px;
    height: 100px;
}
div#top-left {
    top: 0;
    left: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    background: pink;
}
        
        </style>
    </head>
    <body>
    <div id="top-left">
       Top, Left
    </div>
  </body>
</html>



absolute 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>Absolute Positioning</title>
  <style rel="stylesheet" type="text/css">
div.page {
  position: absolute;
  left: 50px;
  top: 100px;
}
p {
  background-color: red;
  width: 200px;
}
p.two {
  position: absolute;
  left: 50px;
  top: -25px;
  background: pink;
}
</style>
</head>
<body>
<div class="page">
<p>b>one</b>This will be at the top of the page.</p>
<p class="two"><b>two</b>This will be in the middle of the page.</p>
<p><b>three</b>This will be at the bottom of the page.</p>
</div>
</body>
</html>



absolute positioning for header panel

 
<?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>Fixed Positioning</title>
  <style rel="stylesheet" type="text/css">
div.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  color: red;
  background-color: pink;
}
p {
  width: 300px;
  padding: 5px;
  color: yellow;
  background-color: blue;
}
p.one {
  margin-top: 100px;
}
</style>
</head>
<body>
<div class="header">asdfasdf</div>
<p class="one"><p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
</p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
<p> <BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
</body>
</html>



Absolute 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>Absolute Positioning</title>
   </head>
   <body>
      <p><img src = "http://www.wbex.ru/style/logo.png" style = "position: absolute; 
         top: 0px; left: 0px; z-index: 1"  
         alt = "First positioned image" /></p>
      <p style = "position: absolute; top: 50px; left: 50px; 
         z-index: 3; font-size: 20pt;">Positioned Text</p>
      <p><img src = "http://www.wbex.ru/style/logo.png" style = "position: absolute; 
         top: 25px; left: 100px; z-index: 2" alt = 
         "Second positioned image" /></p>
   </body>
</html>



Absolute position is in a relative position

 

<?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">
   <head>
      <title></title>
      <style type="text/css">
* .positioned {
  background: #ccc;
  position: relative;
}
* .absolute {
  background: #aaa;
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
   </head>
   <body>
<h1>Absolute</h1> 
<div class="positioned"> this is a test
<span class="absolute">Sized Absolute</span> 
</div> 
   </body>
</html>



absolute position offset

 
<!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: absolute;
                width: 150px;
                height: 150px;
                background: yellow;
            }
            div#div1 {
                top: 0;
                left: 0;   
            }
            div#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>



absolute position offset: bottom 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: absolute;
                width: 150px;
                height: 150px;
                background: lightyellow;
            }
            div#div1 {
                bottom: 0;
                left: 0;   
            }
            div#div2 {
                bottom: 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>



absolute position offset: bottom right

 
<!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: absolute;
                width: 150px;
                height: 150px;
                background: lightyellow;
            }
            div#div1 {
                bottom: 0;
                right: 0;   
            }
            div#div2 {
                bottom: 20px;
                right: 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>



absolute position offset: no-width, no-height

 
<!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: absolute;
                background: lightyellow;
            }
            div#div1 {
                top: 0;
                left: 0;   
            }
            div#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>



absolute position: offset right

 
<!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: absolute;
                width: 150px;
                height: 150px;
                background: lightyellow;
            }
            div#div1 {
                top: 0;
                right: 0;   
            }
            div#div2 {
                top: 20px;
                right: 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>



absolute position offset: top right bottom 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: absolute;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: lightyellow;
            }
            div#div1 {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            div#div2 {
                top: 20px;
                right: 20px;
                bottom: 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>



Absolute position to the bottom

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



An absolute element is removed from the normal flow and put in a layer above or below it.

 
<!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">
* .container {
  position: relative;
}
* .box {
  position: absolute;
  overflow: auto;
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  width: 220px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .before {
  width: 100px;
  height: auto;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}
</style>
</head>
<body>

<div class="container"> 
    <div>BEFORE</div> 
    <div class="box before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>



left, right, top, and bottom applied to absolute boxes.

 

<!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">
* .container {
  position: relative;
}
* .box {
  position: absolute;
  z-index: 1;
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  width: 220px;
  height: 100px;
  background: red;
}
* .before {
    z-index: 2;
  width: 100px;
  height: 400px;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}
</style>
</head>
<body>

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>



position: absolute and to the top 100px

 
<!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" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#quote {
    position: absolute;
    border: 2px dotted red;
    top: 100px;
    left: 50px;
    right: 100px;
}
</style>
</head>
<body>
<p id="quote">This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
</body>
</html>



position absolute offset

 
<!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: absolute;
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: lightyellow;
            }
            #div1 {
                top: 0;
                left: 0;   
            }
            #div2 {
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position absolute: offset bottom 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: absolute;
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                bottom: 0;
                left: 0;   
            }
            #div2 {
                bottom: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position absolute: offset bottom right

 
<!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: absolute;
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                bottom: 0;
                right: 0;   
            }
            #div2 {
                bottom: 20px;
                right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position absolute: offset no width, no height

 
<!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: absolute;
                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">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position absolute: offset right

 
<!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: absolute;
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                top: 0;
                right: 0;   
            }
            #div2 {
                top: 20px;
                right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position absolute, offset, top, right, bottom, 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: absolute;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            #div2 {
                top: 20px;
                right: 20px;
                bottom: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



position:absolute positions an element from its location in the normal flow or from its nearest positioned ancestor.

 
<!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;
  border-left: 1px solid gray;
  border-right: 2px solid black;
  border-top: 1px solid gray;
  border-bottom: 2px solid black;
}
* .pos {
  position: absolute;
  left: 100px;
}

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



Remove an element from the normal flow and move it into its own layer with absolute position.

 


<!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">
#in-place {
  position: absolute;
  z-index: 1;
  background: red;
}
#shrinkwrapped {
  position: absolute;
  z-index: 0;
  width: auto;
  left: 0;
  bottom: 0;
  margin: 0;
  background: blue;
}
#sized {
  position: absolute;
  z-index: auto;
  width: 170px;
  height: 115px;
  bottom: 0;
  left: 270px;
  background: gold;
}
#stretched {
  position: absolute;
  z-index: -1;
  height: auto;
  right: 0;
  top: 0;
  bottom: 0;
  background: pink;
}
.grandContainer{
   width: 800px;
   height: 800px;
   background: gray;
}
.parent{
   width: 600px;
   height: 600px;
   background: black;
   color: white;
}
</style>
</head>
<body>
<div class="grandContainer"><h2>Positioned Grandparent</h2> 
<div class="parent"><h2>Non-positioned Parent</h2> 
Absolute elements are positioned in their own layer in front of or behind the 
normal flow. 
<span id="in-place" class="box">In-place Absolute</span> 
<span id="sized" class="box">Sized Absolute</span> 
<p id="stretched" class="box">Stretched Absolute</p> 
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p></div></div> 
</body>
</html>



Shrinkwrapped Absolute right offset

 

<!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;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .ex {
  padding: 5px;
  border: 5px solid black;
}
div.ex span {
  margin-right: -60px;
  border: 1px dotted black;
}
span.ex span {
  margin-right: 30px;
  border: none;
  background-color: gold;
}
#myStyle {
  position: absolute;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: auto;
  margin-left: auto;
  right: 0;
  margin-right: -50px;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myStyle" class="ex"><span>Shrinkwrapped Absolute: -50px</span></span> 
  </div>
</div> 
</body>
</html>



two block with position: 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 {
                position: absolute;
                width: 200px;
                border: 1px solid black;
                background: #ccc;  
            }
        </style>
    </head>
    <body>
        <div>
            Paragraph text. 
 
        </div>
        <div>
            Second div text.
        </div>
    </body>
</html>



Use absolute position to the right to layout the menu bar section

 

<?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 {
  color: #000;
  background-color: #ccc;
}
#content {
  padding: 10px;
  margin: 5px 122px 5px 5px;
  background-color: #fff;
  border: 1px solid #000;
}
#menu {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}
  </style>
</head>
<body>
  <div id="menu">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="content">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</body>

</html>



use absolute positiont to create a ladder layout

 

<?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;
}
#one {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#two {
  position: absolute;
  top: 40px;
  left: 40px;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}
#three {
  position: absolute;
  top: 70px;
  left: 70px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
#four {
  position: absolute;
  top: 100px;
  left: 100px;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  width: 20%;
}
  </style>
</head>
<body>
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
  <div id="four">4</div>
</body>
</html>



Use inline style to control the absolute 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>Using Absolute Positioning</title>
    <style type="text/css" rel="stylesheet" >
p {
  border-width: thin;
  border-style: solid; 
  height: 100px; 
  width: 100px;
  text-align:center
}
    </style>
  </head>
  <body>
    <p style="background-color: red; position: absolute; top: 100px; left: 0;">
      Container 1
    </p>
    <p style="background-color: white; position: absolute; top: 100px;left: 150px;">
      Container 2
    </p>
    <p style="background-color: blue; position: absolute; top: 100px;left: 300px;">
      Container 3
    </p>
  </body>
</html>



Vertically Stretched Absolute

 
<!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">
#abs-v {
  height: auto;
  top: 0;
  bottom: 0;
  position: absolute;
  background: gold;  
}
</style>
</head>
<body>
  <div id="abs-v">Vertically Stretched Absolute</div> 
</body>
</html>



width, height: absolute positioning

 
<!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">
        p {
            padding: 10px;
            margin: 10px;
            border:  1px solid black;
            background: lightgray;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
            </style>
        </head>
        <body>
      <p>
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
      </p>
        </body>
    </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/position_absolute&oldid=5047»