position: relative; top: 25px; left: 25px; : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

position: relative; top: 25px; left: 25px;

  
    
<!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 type='text/css'>
body {
    background: lightyellow;
    font: 12px sans-serif;
    margin: 50px;
    border: 1px solid rgb(200, 200, 200);
    padding: 0;
}
p {
    background: pink;
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
}
p#margin {
    margin: 25px 0 0 25px;
}
p#relative {
    background: lightblue;
    position: relative;
    top: 25px;
    left: 25px;
    margin: 0;
}
</style>


    </head>
    <body>
        <p id='margin'>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
            massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at,
            lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc
            et purus vitae tortor sodales auctor. Nulla molestie. Pellentesque
            ante mauris, tristique ac, placerat sit amet, placerat nec, ante.
            Vestibulum interdum. Donec vitae tellus. Aliquam erat volutpat.
            Aenean dictum dolor ut sem.
        </p>
        <p id='relative'>
            Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
            nulla pharetra dignissim. Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit. Aliquam cursus tortor eget diam. Pellentesque
            pellentesque turpis sed erat. Duis non libero vel metus
            sollicitudin aliquet. Aenean neque. Nunc eget quam a mauris
            vulputate laoreet. Mauris dictum, eros venenatis fringilla
            vehicula, tortor augue dignissim ante, id imperdiet risus sapien
            at odio. Praesent ligula magna, nonummy vitae, facilisis at,
            fermentum non, diam. Integer sit amet ligula quis lectus bibendum
            porta. Aliquam neque ipsum, aliquet et, semper vel, blandit ac,
            massa. Etiam porttitor justo id arcu. Ut ante lacus, rutrum id,
            vehicula non, faucibus in, lorem. Integer eu ante ut mauris
            rhoncus molestie. Aenean ut est et lectus tempor pharetra. Fusce
            sed nibh. Class aptent taciti sociosqu ad litora torquent per
            conubia nostra, per inceptos hymenaeos.
        </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: 10px; left: 10px;
18.Relative Positioning
19.Absolute Positioning
20.Fixed Positioning
21.Floating Positioning
22.CSS Positioning
23.HTML to demonstrate CSS positioning
24.Absolute position from the bottom
25.position: relative; top: 100px; left: 20px;
26.background-position: 75px 150px;
27.Positioning Items
28.positioned in relation to containing element
29.CSS Positioning
30.CSS positioning
31.CSS positioning 2
32.Using absolute positioning to center a box onscreen
33.The list-style property: combine three separate properties, list-style-type, list-style-image, and list-style-position
34.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
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;