HTML/CSS/Box Model/top — различия между версиями

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

Текущая версия на 08:16, 26 мая 2010

Absolute Outside its parent on the Bottom Left with 100% top

 

<!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;
}
* .left {
  position: absolute;
  right: 100%;
  margin-right: 5px;
  background: red;
}
</style>
</head>
<body>
<div class="parent">Parent 
  <p class="bottom left">Absolute Outside Bottom Left</p> 
</div> 
</body>
</html>



Absolute position with top, right 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>vertically stretching content</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
    margin: 0;
    padding: 0;
}
p {
    background: pink;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}
p#absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}        
        </style>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
        <p id="absolute">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
    </body>
</html>



Body top left 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">
  html, body {
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
  }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1> 
<h2>Nulla cursus semper metus</h2> 
<h3>Nam enim</h2> 
  
<p>this is a test.</p>

</body>
</html>



Offset Relative

 
<!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;
}
* .offset1 {
  left: 0px;
  top: -12px;
  background: blue;
  color: white;
}
</style>
</head>
<body>
<div class="parent"> 
    <p class="relative offset"> 
    this is a test. this is a test. 
    
    <span class="relative offset1"> this is a test. </span>
    this is a test. </p> 
    
</div> 
</body>
</html>



position: relative and top left offset

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
  border: 1px solid #000000;
  margin: 5px;
  width: 300px;
}
div#page2 {
  position: relative;
  top: 20px;
  left: 20px;
}
</style>
</head>
<body>
  <div id="page1">
    <h1>This is the heading</h1>
    <p>Here is paragraph one.</p>
    <p>Here is paragraph two.</p>
    <p>Here is paragraph three.</p>
  </div>
  <div id="page2">
    <h1>This is the heading</h1>
    <p>Here is paragraph one.</p>
    <p>Here is paragraph two.</p>
    <p>Here is paragraph three.</p>
  </div>
</body> 
</html>



Relative block to top and 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" xml:lang="en">
    <head>
        <title>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
    margin: 50px;
    border: 1px solid rgb(200, 200, 200);
    padding: 0;
}
p#relative {
    background: pink;
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    background: lightblue;
    position: relative;
    top: 25px;
    left: 25px;
    margin: 0;
}        </style>
    </head>
    <body>
        <p id="relative">
            Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
            conubia nostra, per inceptos hymenaeos.
        </p>
    </body>
</html>



Relative negative top offset

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
  border: 1px solid #000;
  margin: 5px;
}
div {
  width: 350px;
}
p {
  width: 300px;
}
div#page2 {
  position: relative;
  top: -100px;
  left: 20px;
}
</style>
</head>
<body>
  <div id="page1">
    <h1>This is the heading</h1>
    <p>Here is paragraph one.</p>
    <p>Here is paragraph two.</p>
    <p>Here is paragraph three.</p>
  </div>
    <div id="page2"> 
        <h1>This is the heading</h1>
        <p>Here is paragraph one.</p>
        <p>Here is paragraph two.</p>
        <p>Here is paragraph three.</p>
    </div>
</body> 
</html>



Relative offset indent

 
<!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;
}
* .indented {
  margin-left: 60px;
  margin-right: 60px;
  background: gold;
}
* .relative {
  position: relative;
  background: purple;
}
* .offset4 {
  left: 0px;
  top: -32px;
  background: white;
  color: black;
}
</style>
</head>
<body>
<div class="parent"> 
    <p class="relative offset4 indented">Indented Static Block </p> 
</div> 
</body>
</html>



top: -100px

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div,h1,p {
  font-family: arial, verdana, sans-serif;
  border: 1px solid #000000;
  margin: 5px;
}
div {
  width: 350px;
}
p {
  width: 300px;
}
div#page2 {
  position: relative;
  top: -100px;
  left: 20px;
}
</style>
</head>
<body>
  <div id="page1">
    <h1>This is the heading</h1>
    <p>Here is paragraph one.</p>
    <p>Here is paragraph two.</p>
    <p>Here is paragraph three.</p>
  </div>
  
<div id="page2"> 
<h1>This is the heading</h1>
<p>Here is paragraph one.</p>
<p>Here is paragraph two.</p>
<p>Here is paragraph three.</p>
</div>
</body> 
</html>



top aligns the top side of an absolute element to the top side of its container.

 
<!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: 300px;
  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>



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

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



When the top and bottom offset properties are applied to the same element, height is 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-y {
          margin: 0;
          padding: 5px;
          border: 1px solid black;
          position: absolute;
          top: 5px;
          right: 5px;
          bottom: 5px;
          width: 100px;
          background: khaki;
      }
              </style>
          </head>
          <body>
              <div>
                  <p id="offset-y">
                      When the top and bottom offset properties are applied to the same
                      element, height is implied.
                  </p>
              </div>
          </body>
      </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/top&oldid=5255»