Содержание

1 Absolute and fixed positioning use left, right, top, bottom, and z-index to control the alignment of the absolute box.
2 Elements with a fixed position are always positioned relative to the browser"s viewport, not in a document"s structure.
3 Elements with a fixed position stay in place, even when a document is scrolled.
4 Fixed block to bottom and left
5 Fixed block to bottom and right
6 fixed block to top and left
7 Fixed block to top and right
8 Fixed block with width and height to bottom and top
9 Fixed position and static position
10 Fixed top, footer and left bar
11 move an element into its own layer and fix its position to the viewport.
12 Positioned Grandparent
13 Non-positioned Parent
14 Position:fixed header
15 this is the header

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

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

Absolute

Fixed

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

  </body>

</html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

  </body>

</html>

</source>

Fixed block to bottom and left

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>

Fixed block to bottom and right

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>

fixed block to top and left

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>

Fixed block to top and right

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>

Fixed block with width and height to bottom and top

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.

   </body>

</html>

</source>

Fixed position and static position

   <source lang="html4strict">

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

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

1

2

3

4

</body>

</html>

</source>

Fixed top, footer and left bar

   <source lang="html4strict">

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

menu
menu
menu
menu
menu
menu
menu
menu

Content start

Content

Content end

Fixed Bottom

</body> </html>

</source>

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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Positioned Grandparent

Non-positioned Parent

   In-place Absolute 
   Sized Absolute

Stretched Absolute

Shrinkwrapped Absolute

</body> </html>

</source>

Position:fixed header

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

this is the header

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>

</source>

position-fixed offset: left top

   <source lang="html4strict">

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

           This is the text of the first div.
           This is the text of the first div.

          This is the text of the second div.
          This is the text of the second div.

   </body>

</html>

</source>

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

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

}

.pos {

 position: fixed;

}

</style> </head> <body>

Positioned

</body> </html>

</source>

position fixed: top left

   <source lang="html4strict">

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

           div1

          div2

   </body>

</html>

</source>

Using Fixed Positioning

   <source lang="html4strict">

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

Container 1

Container 2

Container 3

   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>

</source>

watermark with position fixed

   <source lang="html4strict">

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

faq

           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.

           <a href="">W</a>

   </body>

</html>

</source>

HTML/CSS/Layout/position fixed

Содержание

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

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

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

Fixed block to bottom and left

Fixed block to bottom and right

fixed block to top and left

Fixed block to top and right

Fixed block with width and height to bottom and top

Fixed position and static position

Fixed top, footer and left bar

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

Positioned Grandparent

Non-positioned Parent

Position:fixed header

this is the header

position-fixed offset: left top

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

position fixed: top left

Using Fixed Positioning

watermark with position fixed

faq

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты