Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport. : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

Elements that are absolutely positioned are positioned, by default, 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>Absolute Positioning</title>
<style type='text/css'>
body {
    background: yellowgreen;
}
p {
    margin: 10px 110px;
}
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;
}
div#top-right {
    top: 0;
    right: 0;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
div#bottom-left {
    bottom: 0;
    left: 0;
    border-right: 1px solid black;
    border-top: 1px solid black;
}
div#bottom-right {
    bottom: 0;
    right: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}
</style>


    </head>
    <body>
        <p>
            
        </p>
        <div id='top-left'>
            Top, Left
        </div>
        <div id='top-right'>
            Top, Right
        </div>
        <div id='bottom-left'>
            Bottom, Left
        </div>
        <div id='bottom-right'>
            Bottom, Right
        </div>
    </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.This element is positioned to the bottom right of the relatively positioned element.
36.Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's viewport.
37.position: absolute; and nested effect
38.Image positioned in relation to containing element
39.position:relative; top:20px; left:20px;