This element is positioned to the bottom right of the relatively positioned element. : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

This element is positioned to the bottom right of the relatively positioned element.

  
                
<!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>Relative Positioning</title>
<style type='text/css'>
body {
    font: 12px sans-serif;
}
div {
    background: yellow;
    border: 1px solid black;
    margin: 0 20px;
}
div#relative {
    position: relative;
    height: 200px;
}
p {
    padding: 5px;
}
p#bottom-right {
    margin: 0;
    background: gold;
    border: 1px solid crimson;
    height: 50px;
    width: 200px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

</style>


    </head>
    <body>
        <div id='relative'>
            <p>
                Relative positioning is a lot like static positioning; elements
                don't appear to leave the flow of the document.
            </p>
            <p id='bottom-right'>
                This element is positioned to the bottom right of the
                relatively positioned element.
            </p>
        </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.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
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;