HTML/CSS/Layout/position fixed

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

Absolute and fixed positioning use left, right, top, bottom, and z-index to control the alignment of the absolute box.

 
<!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">
.section{
  position: fix;
  width: 600px;
  height: 600px;
  background: gray;
}
* .absolute {
  position: absolute;
  top: 20px;
  left: 215px;
  background: yellow;
  width: auto;
}
* .fixed {
  position: fixed;
  bottom: 20px;
  right: 5px;
  background: gold;
}
</style>
</head>
<body>
<div class="section">
  <p class="static centered" > 
    <div class="absolute">Absolute</div> 
    <div class="fixed">Fixed</div> 
  </p>
</div> 
</body>
</html>



Elements with a fixed position are always positioned relative to the browser"s viewport, not in a document"s structure.

 

<!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>Fixed Positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div {
    position: fixed;
    background: gold;
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
div#fixed-top {
    top: 5px;
    left: 5px;
}
div#fixed-bottom {
    bottom: 5px;
    left: 5px;
}
  
   </style>
   </head>
   <body>
        <div id="fixed-top">
        </div>
        <div id="fixed-bottom">
        </div>

   </body>
</html>



Elements with a fixed position stay in place, even when a document is scrolled.

 

<!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>Fixed Positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
div {
    position: fixed;
    background: gold;
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
div#fixed-top {
    top: 5px;
    left: 5px;
}
div#fixed-bottom {
    bottom: 5px;
    left: 5px;
}
  
   </style>
   </head>
   <body>
        <div id="fixed-top">
        </div>
        <div id="fixed-bottom">
        </div>

   </body>
</html>



Fixed block to bottom 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;
}
p {
    line-height: 2em;
    margin: 10px 110px;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: fixed;
    background: yellowgreen;
    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 id="one"></div>
    </body>
</html>



Fixed block to bottom and 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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
p {
    line-height: 2em;
    margin: 10px 110px;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: fixed;
    background: orange;
    bottom: 0;
    right: 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 id="one"></div>
    </body>
</html>



fixed 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;
}
p {
    line-height: 2em;
    margin: 10px 110px;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: fixed;
    background: pink;
    top: 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 id="one"></div>
    </body>
</html>



Fixed block to top and 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>positioning</title>
        <style rel="stylesheet" type="text/css">
body {
    background: lightyellow;
}
p {
    line-height: 2em;
    margin: 10px 110px;
}
div#one {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: fixed;
    background: lightblue;
    top: 0;
    right: 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 id="one"></div>
    </body>
</html>



Fixed block with width and height to bottom and 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" 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;
    top: 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>



Fixed position and static position

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
}

.myStyle {
  position: static;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
.different {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
  </style>
</head>

<body>
  <div class="different">1</div>
  <div class="myStyle">2</div>
  <div class="myStyle">3</div>
  <div class="myStyle">4</div>
</body>

</html>



Fixed top, footer and left bar

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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=iso-8859-1" />
<style type="text/css">
html,body {
  margin: 0;
  padding: 0;
}
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}
* html #top-bar {
  position: absolute;
}
#topbar-inner {
  height: 23px;
  background: #bbb;
}
* html #topbar-inner {
  margin-right: 17px;
}
* html body {
  padding-top: 23px;
}
* html,* html body {
  overflow-y: hidden;
  height: 100%;
  margin-top: -23px;
}
#mainouter {
  position: relative;
  z-index: 2;
  padding-top: 23px;
  padding-bottom: 40px;
  margin-left: 150px;
  background: #ccc;
  min-height: 100%;
}
* html #mainouter {
  height: 100%;
  overflow: auto;
  overflow-y: scroll;
  position: relative;
  z-index: 2;
  padding-top: 23px;
  padding-bottom: 40px;
}
#bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
}
* html #bottom {
  position: absolute;
  bottom: -1px;
}
#bottom-inner {
  height: 40px;
  background: #aaa;
}
* html #bottom-inner {
  margin-right: 17px;
}
* html #left {
  position: absolute;
  height: 100%;
  width: 150px;
  left: 0;
  top: 23px;
  overflow: auto;
  z-index: 100;
  margin-bottom: -63px;
}
html>body #left {
  position: fixed;
  left: 0;
  top: 23px;
  bottom: 40px;
  padding: 0;
  width: 149px;
  border-right: 1px solid #000;
}
</style>
</head>
<body>
<div id="top-bar"> 
  <div id="topbar-inner">this is a test. this is a test. </div>
</div>
<div id="left"> 
  <ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
  </ul>
</div>
<div id="mainouter"> 
  <p>Content start</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content end</p>
</div>
<div id="bottom"> 
  <div id="bottom-inner">Fixed Bottom</div>
</div>
</body>
</html>



move an element into its own layer and fix its position to the viewport.

 
<!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">
* .grandContainer {
  position: relative;
  z-index: 1;
  width: 800px;
  height: 800px;
  background: red;
}
#in-place {
  position: fixed;
  z-index: 1; width 600px;
  height: 600px;
  background: yellow;
}
#shrinkwrapped {
  position: fixed;
  z-index: 0;
  width: auto;
  left: 0;
  bottom: 0;
  margin: 0;
  background: blue;
}
#sized {
  position: fixed;
  z-index: auto;
  width: 170px;
  height: 115px;
  bottom: 0;
  left: 270px;
  margin: 0;
  background: gold;
}
#stretched {
  position: fixed;
  z-index: -1;
  height: auto;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  background: pink;
}
</style>
</head>
<body>
<div class="grandContainer"><h2>Positioned Grandparent</h2> 
  <div class="parent">
    <h2>Non-positioned Parent</h2> 
    <span id="in-place" class="box">In-place Absolute</span> 
    <span id="sized" class="box">Sized Absolute</span> 
    <p id="stretched" class="box">Stretched Absolute</p> 
    <p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p>
  </div>
</div> 
</body>
</html>



Position:fixed header

 

<!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=ISO-8859-1" />
<title>Position:fixed</title>
<style type="text/css">
body {
  margin: 0 auto;
  width: 500px;
}
h1 {
  background: black;
  color: white;
  height: 60px;
  position: fixed;
}
div {
  padding-top: 130px;
}
</style>
</head>
<body>
<h1>this is the header</h1>
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test. this is a test. this is a test. this is a test. 
<br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test. this is a test. this is a test. this is a test. 
<br/><br/><br/><br/><br/><br/><br/>

this is a test. this is a test. this is a test. this is a test. this is a test. 
<br/><br/><br/><br/><br/><br/><br/>

</div>
</body>
</html>



position-fixed offset: left top

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body {
                height: 2000px;   
            }
            div {
                position: fixed;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: lightyellow;
            }
            div#div1 {
                top: 0;
                left: 0;   
            }
            div#div2 {
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            This is the text of the first div.
            This is the text of the first div.
        </div>
        <div id="div2">
           This is the text of the second div.
           This is the text of the second div.
        </div>
    </body>
</html>



position:fixed positions an element at an offset from the viewport.

 
<!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;
}
* .pos {
  position: fixed;
}

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



position fixed: top left

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body {
                height: 2000px;   
            }
            div {
                position: fixed;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                top: 0;
                left: 0;   
            }
            #div2 {
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>



Using Fixed Positioning

 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Using Fixed Positioning</title>
    <style type="text/css" rel="stylesheet">
p {
  border-width: thin;
  border-style: solid; 
  height: 100px; 
  width: 100px;
  text-align: center}
p.red {background-color: red; position: fixed; top: 0; left: 0}
p.white {background-color: white; position: fixed; top: 0; left: 150px}
p.blue {background-color: blue; position: fixed; top: 0; left: 300px}
    </style>
  </head>
  <body>
    <p class="red">
      Container 1
    </p>
    <p class="white">
      Container 2
    </p>
    <p class="blue">
      Container 3
    </p>
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
  </body>
</html>



watermark with position fixed

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css">
            h1, h2 {
                margin: 0;
                background: gray;
            }
            h1 {
                border-bottom: 5px solid black;
            }
            div {
                background: lightgrey;
                padding: 0.7em;
                clear: left;
            }
            div#watermark {
                position: fixed;
                bottom: 10px;
                right: 10px;
                font-size: 4em;
                padding: 0.1em;
                background: white;
                color: gray;
                opacity: 0.5;              
            }
            div#watermark a {
                color: black;
                text-decoration: none;
            }
            
            p {
                border: 0.05em solid black;
                padding: 0.8em;
            }
            h3:target {
                color: yellow;
                background: red;
            }
            ul#top li a {
                color: black;   
            }
        </style>
    </head>
    <body>
        <div>
            <h2>faq</h2>
            This is a test. This is a test. This is a test. This is a test. This is a test. 
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
            This is a test. This is a test. This is a test. This is a test. This is a test. 
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
            This is a test. This is a test. This is a test. This is a test. 
            This is a test. This is a test. This is a test. 
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
        </div>
        <div id="watermark">
            <a href="">W</a>
        </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/position_fixed&oldid=5035»