HTML/CSS/Box Model/bottom

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

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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
         <head>
             <title>Opposing Offset Properties</title>
             <style rel="stylesheet" type="text/css">
     div#offset-four {
         background: yellow;
         border: 1px solid rgb(128, 128, 128);
         position: absolute;
         top: 20px;
         right: 20px;
         bottom: 20px;
         left: 20px;
     }



             </style>
         </head>
         <body>

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


Absolute Outside Top Right with 100% 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"> <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;

}

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

}

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

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

Parent

Absolute Outside Top Right

</body> </html> 

</source>


Absolute to left 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></title>
       <style rel="stylesheet" type="text/css">

body { 

   background: pink;
   font: 12px sans-serif;
   margin: 0;
   padding: 0;

} p { 

   background: red;
   border: 1px solid green;
   padding: 5px;
   margin: 5px;

} p#absolute { 

   position: absolute;
   bottom: 0;
   left: 0;

} 

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. 

   </body>

</html> 

</source>


bottom aligns the bottom side of an absolute element to the bottom 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;
 background: black;

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 bottom: 20px;
 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>


Bottom always

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

body { 

   background: lightyellow;
   font: 12px sans-serif;
   margin: 0;
   padding: 0;

} p { 

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

} p#absolute { 

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

} 

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

   </body>

</html> 

</source>


Bottom auto

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

  1. abs {
 width: auto;
 height: auto;
 left: auto;
 bottom: auto;
 position: absolute;
 background: blue;

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

 Shrinkwrapped Absolute

</body> </html> 

</source>


Bottom-left Absolute 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>Absolute Positioning</title>
       <style rel="stylesheet" type="text/css">

body { 

   background: yellowgreen;

} div { 

   position: absolute;
   background: yellow;
   padding: 5px;
   width: 100px;
   height: 100px;

} div#bottom-left { 

   bottom: 0;
   left: 0;
   border-right: 1px solid black;
   border-top: 1px solid black;
   background: blue;

} 

       </style>
   </head>
   <body>

       Bottom, Left

 </body>

</html> 

</source>


Bottom-right Absolute 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>Absolute Positioning</title>
       <style rel="stylesheet" type="text/css">

body { 

   background: yellowgreen;

} div { 

   position: absolute;
   background: yellow;
   padding: 5px;
   width: 100px;
   height: 100px;

} div#bottom-right { 

   bottom: 0;
   right: 0;
   border-left: 1px solid black;
   border-top: 1px solid black;
   background: red;

} 

       </style>
   </head>
   <body>

       Bottom, Right

 </body>

</html> 

</source>


horizontally stretching content with top, right 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></title>
       <style rel="stylesheet" type="text/css">

body { 

   background: lightyellow;
   font: 12px sans-serif;
   margin: 0;
   padding: 0;

} p { 

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

} p#absolute { 

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

} 

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

   </body>

</html> 

</source>


positioning and sizing

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

body { 

   background: pink;
   font: 12px sans-serif;
   margin: 0;
   padding: 0;

} p { 

   background: red;
   border: 1px solid green;
   padding: 5px;
   margin: 5px;

} p#absolute { 

   position: absolute;
   bottom: 0;
   left: 0;

} 

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. 

   </body>

</html> 

</source>


Position layer

   <source lang="html4strict">

<html> <head> <style type="text/css"> div.layer1 { 

           position:absolute;
           left:75px;
           top:75px;
           color:red

} div.layer2 { 

           position:absolute;
           right:75px;
           bottom:75px;
           font-family: arial;
           color:blue;
           font-weight:bold

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

Positioning Layers

This is the first layer1 paragraph

This is the second layer1 paragraph

This is the first layer2 paragraph

This is the second layer2 paragraph

</body> </html> 

</source>


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

}

</style> </head> <body>

Positioned

</body> </html> 

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