HTML/CSS/Box Model/left

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

Absolute Outside its parent on the Bottom Right with 100% 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"> <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;

}

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

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

Parent

Absolute Outside Bottom Right

</body> </html> 

</source>


Fixed block with width and height 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>positioning</title>
       <style rel="stylesheet" type="text/css">

body { 

   background: lightyellow;

} p { 

   line-height: 2em;
   margin: 10px 10px 10px 110px;

} div { 

   width: 100px;
   height: 100px;
   border: 1px solid rgb(200, 200, 200);
   background: pink;
   position: fixed;
   bottom: 0;
   left: 0;

} 

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

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

   </body>

</html> 

</source>


left aligns the left side of an absolute 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"> <head> <title></title> <style type="text/css">

  • .container {
 position: relative;

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 left: 300px;
 right: auto;
 top: 0;
 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>


Positive values offset to the right and negative to the 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"> <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;
 left: -100px;

}

</style> </head> <body>

Positioned

</body> </html> 

</source>


Relative offset float

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

}

  • .offset2 {
 left: -50px;
 top: 10px;
 background: gray;

}

</style> </head> <body>

Float

</body> </html> 

</source>


Relative sized offset

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

}

  • .sized {
 width: 90px;
 height: 40px;
 margin-left: auto;
 margin-right: 0;
 background: pink;

}

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

}

  • .offset3 {
 left: 50px;
 top: 10px;
 background: red;

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

Sized Static

</body> </html> 

</source>


Stacking order of three classes used in div elements in the body

   <source lang="html4strict">

<html> 

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

.layer1 { 

 font-size: 190pt;
 font-weight: 900;
 color: white;
 z-index: 1;
 position: absolute;
 left: -100px;
 top: -120px;
 background: red;

} .layer2 { 

 font-size: 12pt;
 font-weight: 500;
 color: blue;
 z-index: 3;
 position: absolute;
 left: 40px;
 top: 80px;
 background: gold;

} .layer3 { 

 font-size: 100pt;
 font-weight: 300;
 color: yellow;
 z-index: 2;
 position: absolute;
 left: -20px;
 top: 0px;
 background: pink;

} </style> 

 </head>
 <body>
Position
  • A
  • B
  • C
 </body>

</html> 

</source>


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


use "left" to offset the left side of an element from the left side of its reference 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;
 left: 100px;

}

</style> </head> <body>

Positioned

</body> </html> 

</source>


When all four offset properties are specified on the same element both width and height are 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-four-copy {
         border: 1px solid black;
         background: gold;
         position: absolute;
         left: 20px;
         right: 20px;
         bottom: 20px;
         top: 20px;
         border: none;
         
     }
           </style>
         </head>
         <body>

When all four offset properties are specified on the same element both width and height are implied. 

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


width is auto, both left and right are some other value

   <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: auto;
 left: 0;
 right: 0;
 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>


width, left and right are 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">

  • .container {
 position: relative;
 background: black;

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 bottom: 20px;
 width: auto;
 left: auto;
 right: auto;
 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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/left&oldid=5267»