Содержание

1 Absolute Box
2 Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container.
3 Absolutely positioned Elements are positioned relative to the browser"s viewport.
4 absolute positioning
5 absolute positioning for header panel
6 Absolute positioning of elements
7 Absolute position is in a relative position
8 Absolute

Absolute Box

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

BEFORE

ABSOLUTE BEFORE

this is a test. this is a test.

ABSOLUTE AFTER

AFTER

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

      Top, Left

 </body>

</html>

</source>

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

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

b>one</b>This will be at the top of the page.

twoThis will be in the middle of the page.

threeThis will be at the bottom of the page.

</body> </html>

</source>

absolute positioning for header panel

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

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

<p>

</p>

</body> </html>

</source>

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

  <head>
     <title>Absolute Positioning</title>
  </head>
  <body>

Positioned Text

  </body>

</html>

</source>

Absolute position is in a relative position

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

  <head>
     <title></title>
     <style type="text/css">

.positioned {

 background: #ccc;
 position: relative;

}

.absolute {

 background: #aaa;
 position: absolute;
 top: 10px;
 left: 10px;

} </style>

  </head>
  <body>

Absolute

this is a test

Sized Absolute

  </body>

</html>

</source>

absolute position offset

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

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

absolute position offset: bottom 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>

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

           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>

absolute position offset: no-width, no-height

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

absolute position: offset 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>

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

           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>

absolute position offset: top right bottom 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: 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>

           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>

Absolute position to the bottom

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

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

1

2

3

4

</body>

</html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

BEFORE

ABSOLUTE BEFORE

this is a test. this is a test.

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

BEFORE

ABSOLUTE BEFORE

this is a test. this is a test.

</body> </html>

</source>

position: absolute and to the top 100px

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

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.

</body> </html>

</source>

position absolute offset

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

           div1

          div2

   </body>

</html>

</source>

position absolute: offset bottom 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: 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>

           div1

          div2

   </body>

</html>

</source>

position absolute: offset bottom 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>

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

           div1

          div2

   </body>

</html>

</source>

position absolute: offset no width, no height

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

           div1

          div2

   </body>

</html>

</source>

position absolute: offset 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>

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

           div1

          div2

   </body>

</html>

</source>

position absolute, offset, top, right, bottom, 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: 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>

           div1

          div2

   </body>

</html>

</source>

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

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

Positioned

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Positioned Grandparent

Non-positioned Parent

Absolute elements are positioned in their own layer in front of or behind the normal flow. In-place Absolute Sized Absolute

Stretched Absolute

Shrinkwrapped Absolute

</body> </html>

</source>

Shrinkwrapped Absolute right offset

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

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

Positioned Grandparent

Non-positioned Parent

   Shrinkwrapped Absolute: -50px

</body> </html>

</source>

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

           Paragraph text.

           Second div text.

   </body>

</html>

</source>

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

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

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

 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.

 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.

</body>

</html>

</source>

use absolute positiont to create a ladder layout

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

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

1

2

3

4

</body> </html>

</source>

Use inline style to control the absolute 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>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>

Container 1

Container 2

Container 3

 </body>

</html>

</source>

Vertically Stretched Absolute

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

abs-v {

 height: auto;
 top: 0;
 bottom: 0;
 position: absolute;
 background: gold;

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

Vertically Stretched Absolute

</body> </html>

</source>

width, height: absolute 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></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>

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.

       </body>
   </html>
</source>

HTML/CSS/Layout/position absolute

Содержание

Absolute Box

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

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

absolute positioning

absolute positioning for header panel

Absolute positioning of elements

Absolute position is in a relative position

Absolute

absolute position offset

absolute position offset: bottom left

absolute position offset: bottom right

absolute position offset: no-width, no-height

absolute position: offset right

absolute position offset: top right bottom left

Absolute position to the bottom

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

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

position: absolute and to the top 100px

position absolute offset

position absolute: offset bottom left

position absolute: offset bottom right

position absolute: offset no width, no height

position absolute: offset right

position absolute, offset, top, right, bottom, left

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

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

Positioned Grandparent

Non-positioned Parent

Shrinkwrapped Absolute right offset

two block with position: absolute

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

use absolute positiont to create a ladder layout

Use inline style to control the absolute position

Vertically Stretched Absolute

width, height: absolute positioning

Навигация

Поиск