HTML/CSS/Box Model/right

Материал из Web эксперт
Перейти к: навигация, поиск

Absolute Outside and Top Left positioned with 100% right

 
<!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>
<div class="parent">Parent 
  <p class="top left">Absolute Outside Top Left</p> 
</div> 
</body>
</html>



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.

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

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>



This element is offset from its original position to the right

 
<!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>
         <div>
            <p id="offset">
                This element is offset from its original position to the right.
            </p>
         </div>
     </body>
</html>



Top-right Absolute positioned element

 
<!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>
    <div id="top-right">
        Top, Right
    </div>
  </body>
</html>



Use "right" to offset the right side of an element from the right side of its reference position.

 
<!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>
<div class="relative"> 
    <p class="pos">Positioned</p> 
</div> 
</body>
</html>



width is a value, left is auto, and right is a value

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

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>



width is a value, left is a value, and right is auto

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

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/right&oldid=5233»