HTML/CSS/Box Model/left

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

Absolute Outside its parent on the Bottom Right with 100% left

 

<!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>
<div class="parent">Parent 
  <p class="bottom right">Absolute Outside Bottom Right</p> 
</div> 
</body>
</html>



Fixed block with width and height to left and bottom

 

<!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>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
            Aenean dictum dolor ut sem.
        </p>
        <p>
            Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
            conubia nostra, per inceptos hymenaeos.
        </p>
        <div></div>
    </body>
</html>



left aligns the left side of an absolute 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">
<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>

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



Positive values offset to the right and negative to the left.

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



Relative offset float

 
<!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>
<div class="parent"> 
    <p class="relative offset2 float">Float </p> 
    
</div> 
</body>
</html>



Relative sized offset

 
<!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>
<div class="parent"> 
    <p class="relative offset3 sized">Sized Static </p> 
</div> 
</body>
</html>



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

 
<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>
    <div class="layer1"></div>
    <div class="layer3">Position</div>
    <div class="layer2">
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </body>
</html>



Top-left 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-left {
    top: 0;
    left: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    background: pink;
}
        
        </style>
    </head>
    <body>
    <div id="top-left">
       Top, Left
    </div>
  </body>
</html>



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

</style>
</head>
<body>
<div class="relative"> 
    <p class="pos">Positioned</p> 
</div> 
</body>
</html>



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

 

      <!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>
              <div>
                  <p id="offset-four-copy">
                      When all four offset properties are specified on the same element
                      both width and height are implied.
                  </p>
              </div>
          </body>
      </html>



width is auto, both left and right are some other 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: 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>

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

<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/left&oldid=5267»