HTML/CSS/Box Model/top

Материал из Web эксперт
Версия от 11:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Absolute Outside its parent on the Bottom Left with 100% top

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

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

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

  • .parent {
   left: 300px;
   top: 300px;
 position: relative;
 height: 140px;
 width: 200px;
 background: black;

}

  • .bottom {
 position: absolute;
 top: 100%;
 margin-top: 5px;
 background: red;

}

  • .left {
 position: absolute;
 right: 100%;
 margin-right: 5px;
 background: red;

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

Parent

Absolute Outside Bottom Left

</body> </html>

</source>
   
  


Absolute position with top, right and bottom

   <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>vertically stretching content</title>
       <style rel="stylesheet" type="text/css">

body {

   background: lightyellow;
   margin: 0;
   padding: 0;

} p {

   background: pink;
   border: 1px solid black;
   padding: 5px;
   margin: 5px;

} p#absolute {

   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;

}

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

   </body>

</html>

</source>
   
  


Body top left 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"> <head> <title></title> <style type="text/css">

 html, body {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
 }

</style> </head> <body>

Lorem ipsum dolor sit amet

Nulla cursus semper metus

Nam enim</h2>

this is a test.

</body> </html>

</source>
   
  


Offset Relative

   <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"> .parent {

 width: 600px;
 height: 600px;
 background: black;

}

  • .float {
 float: left;
 width: 90px;
 height: 40px;
 background: yellow;

}

  • .relative {
 position: relative;
 background: purple;

}

  • .offset1 {
 left: 0px;
 top: -12px;
 background: blue;
 color: white;

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

this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>
   
  


position: relative and top left offset

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div,h1,p {

 border: 1px solid #000000;
 margin: 5px;
 width: 300px;

} div#page2 {

 position: relative;
 top: 20px;
 left: 20px;

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

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

</body> </html>

</source>
   
  


Relative block to top and 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>positioning</title>
       <style rel="stylesheet" type="text/css">

body {

   background: lightyellow;
   margin: 50px;
   border: 1px solid rgb(200, 200, 200);
   padding: 0;

} p#relative {

   background: pink;
   border: 1px solid rgb(200, 200, 200);
   padding: 5px;
   background: lightblue;
   position: relative;
   top: 25px;
   left: 25px;
   margin: 0;

} </style>

   </head>
   <body>

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>
   
  


Relative negative top offset

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div,h1,p {

 border: 1px solid #000;
 margin: 5px;

} div {

 width: 350px;

} p {

 width: 300px;

} div#page2 {

 position: relative;
 top: -100px;
 left: 20px;

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

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

</body> </html>

</source>
   
  


Relative offset indent

   <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"> .parent {

 width: 600px;
 height: 600px;
 background: black;

}

  • .indented {
 margin-left: 60px;
 margin-right: 60px;
 background: gold;

}

  • .relative {
 position: relative;
 background: purple;

}

  • .offset4 {
 left: 0px;
 top: -32px;
 background: white;
 color: black;

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

Indented Static Block

</body> </html>

</source>
   
  


top: -100px

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div,h1,p {

 font-family: arial, verdana, sans-serif;
 border: 1px solid #000000;
 margin: 5px;

} div {

 width: 350px;

} p {

 width: 300px;

} div#page2 {

 position: relative;
 top: -100px;
 left: 20px;

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

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

This is the heading

Here is paragraph one.

Here is paragraph two.

Here is paragraph three.

</body> </html>

</source>
   
  


top aligns the top side of an absolute element to the top side of its container.

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

  • .container {
 position: relative;

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 right: 300px;
 top: 300px;
 bottom: auto;
 width: 220px;
 height: 100px;
 margin: 10px;
 padding: 10px;
 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>
   
  


Use "top" to offset the top of an element from the top of its 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"> <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: relative;
 top: -10px;

}

</style> </head> <body>

Positioned

</body> </html>

</source>
   
  


When the top and bottom offset properties are applied to the same element, height is implied.

   <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>Opposing Offset Properties</title>
             <style rel="stylesheet" type="text/css">
     div {
         background: yellow;
         border: 1px solid rgb(128, 128, 128);
         position: absolute;
         width: 600px;
         height: 600px;
     }
     p#offset-y {
         margin: 0;
         padding: 5px;
         border: 1px solid black;
         position: absolute;
         top: 5px;
         right: 5px;
         bottom: 5px;
         width: 100px;
         background: khaki;
     }
             </style>
         </head>
         <body>

When the top and bottom offset properties are applied to the same element, height is implied.

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