Establish and change an element’s position

Using the position properties

The base coordinate is the top left corner of the window which can be understood as (x,y) coordinate (0,0). This is the static layout and the elements will not respond to the top, left, bottom, or right properties.

The position property allows you to specify one of three different options:

the fixed positioning
the relative positioning
the absolute positioning

Using the fixed positioning

With fixed positioning, elements are placed relative to the browser window.

The following code demonstrates the fixed positioning:

<head>
<style type="text/css">
    img {
        position: fixed;
        left: 25px;
        top: 25px;
        border:2px solid red;
        }
</style>
</head>
<body>
    <div id="div1">
        <img src="image.jpg" style="height: 200px;width: 300px;" />
    </div>
</body>

Using the relative positioning

Using relative positioning, you can adjust the layout of elements relative to where they would be in the normal static flow.

With relative positioning, you can actually make your HTML elements overlap.

The following code demonstrates the relative positioning:

<head>
<style type="text/css">
    img:nth-child(1n+0) {
        position: relative;
        left: -25px;
        top: 25px;
        border:2px solid red;
        }
</style>
</head>
<body>
    <div id="div1">
        <img src="image.jpg" style="height: 200px;width: 300px;" />
        <img src="image.jpg" style="height: 200px;width: 300px;" />
        <img src="image.jpg" style="height: 200px;width: 300px;" />
    </div>
</body>

Using the absolute positioning

Using absolute positioning allows you to specify the location of an element such that it is removed from the normal flow of the page.

The element can hovering over or under the content that is in the normal flow of the page.

When overlapping elements using absolute positioning, CSS provides a z-index property. to specify in what order the elements should stack on the page along the z-axis (the third dimension!).

The following code demonstrates the absolute positioning:

<head>
<style type="text/css">
    img {
        position: absolute;
        left: 25px;
        top: 100px;
        border: 2px solid red;
        }
</style>
</head>
<body>
    <div style="width:200px;">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
            wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
        </p>
        <img src="image.jpg" style="height: 70px;width: 70px;" />
    </div>
</body>

Using the float properties

The float property automatically moves an element to the left or right of surrounding content.

This is most commonly used to place images in line with text to force the text to wrap around the image.

The following code demonstrates the float property:

<head>
<style type="text/css">
    .img-1 {
        float: left;
        left: 215px;
        top: 100px;
        height: 50px;
        width: 50px;
        }
    .img-2 {
        float: right;
        left: 215px;
        top: 100px;
        height: 50px;
        width: 50px;
    }
</style>
</head>
<body>
    <div style="width:200px;">
        <p style="width: 300px;margin-left: 50px;">
            Lorem ipsum dolor sit amet,
            <img class="img-1" src="image1.jpg" />
            consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
            wisi enim
            <img class="img-1" src="image2.jpg" />
            ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis 
            dolor in hendrerit in vulputate velit esse molestie consequat, 
            feugiat nulla facilisis at vero eros et accumsan et iusto odio...
        </p>
    </div>
</body>

Ads Right