Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's viewport. : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's 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' xml:lang='en'>
    <head>
        <title>Fixed Positioning</title>
<style type='text/css'>
body {
    background: lightyellow url('http://java2s.com/style/logo.png') fixed;
}
div#fixed-top {
    position: absolute;
    top: expression(eval(documentElement.scrollTop) + 5);
}
div#fixed-bottom {
    position: absolute;
    bottom: auto;
    top: expression(
        (documentElement.scrollTop + documentElement.clientHeight - this.clientHeight) - 7
    );
}
</style>

    </head>
    <body>
        <div id='fixed-top'>
        </div>
        <div id='fixed-bottom'>
        </div>

        </p>
    </body>
</html>








Related examples in the same category

1.'position' Example
2.position: absolute; top: 0; left: 0;
3.position: absolute; top: 0; right: 0;
4.position: absolute; bottom: 0; left: 0;
5.position: absolute; bottom: 0; right: 0;
6.position-absolute
7.position-absolute: offset
8.position absolute offset: bottom left
9.position absolute offset: bottom right
10.position absolute offset: no width no height
11.position absolute offset: right
12.position absolute offset: top right bottom left
13.position fixed
14.position relative
15.position: relative, absolute
16.position: relative;
17.position: relative; top: 25px; left: 25px;
18.position: relative; top: 10px; left: 10px;
19.Relative Positioning
20.Absolute Positioning
21.Fixed Positioning
22.Floating Positioning
23.CSS Positioning
24.HTML to demonstrate CSS positioning
25.Absolute position from the bottom
26.position: relative; top: 100px; left: 20px;
27.background-position: 75px 150px;
28.Positioning Items
29.positioned in relation to containing element
30.CSS Positioning
31.CSS positioning
32.CSS positioning 2
33.Using absolute positioning to center a box onscreen
34.The list-style property: combine three separate properties, list-style-type, list-style-image, and list-style-position
35.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
36.This element is positioned to the bottom right of the relatively positioned element.
37.position: absolute; and nested effect
38.Image positioned in relation to containing element
39.position:relative; top:20px; left:20px;