HTML/CSS/Box Model/right

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

Absolute Outside and Top Left positioned with 100% 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 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;

}

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

}

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

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

Parent

Absolute Outside Top Left

</body> </html> 

</source>


right aligns the right side of an absolute element to the right side of its container and offsets it by a positive or negative 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;

}

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


This element is offset from its original position to the 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 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;

} p#offset { 

   margin: 0;
   background: pink;
   border: 1px solid crimson;
   position: relative;
   top: 10px;
   right: 10px;

} 

       </style>
   </head>
   <body>

This element is offset from its original position to the right. 

    </body>

</html> 

</source>


Top-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#top-right { 

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

} 

       </style>
   </head>
   <body>

       Top, Right

 </body>

</html> 

</source>


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

}

</style> </head> <body>

Positioned

</body> </html> 

</source>


width is a value, left is auto, and right is a 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: 300px;
 left: auto;
 right: 10px;
 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 is a value, left is a value, and right is 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: 300px;
 left: 10px;
 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/right&oldid=5233»