Dremendo Tag Line
CSS Tutorial

CSS position

Float, Position and Layers

In this lesson, we will learn about the CSS position property, its different types and how to use them.

CSS position Property

The CSS position property allows you to control the positioning of elements on a webpage. It is used to determine how an element is positioned within its containing element or relative to other elements on the page. The values of CSS position property are:

  • static
  • relative
  • absolute
  • fixed
  • sticky
video-poster

static

This is the default value of CSS position property.

Elements with position: static; are positioned in the normal flow of the document. Their position is not affected by the top, right, bottom, or left properties.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS position static Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            padding: 10px;
            border: 2px solid red;
            position: static;
            top: 50px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div>
        <p>position staic</p>
    </div>
</body>

</html>

In the above example, you can see that we tried to place the div 50px from the top and 100px from the left, but there is no effect.

relative

Elements with position: relative; are positioned relative to their normal position in the document flow.

You can use the top, right, bottom, and left properties to adjust their position.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS position relative Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            padding: 10px;
            border: 2px solid red;
            position: relative;
            top: 50px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div>
        <p>position relative</p>
    </div>
</body>

</html>

absolute

Elements with position: absolute; are positioned relative to their nearest positioned parent element (a parent element with a position value other than static).

If there's no positioned parent element, the element is positioned relative to the initial containing block (usually the viewport).

You can use the top, right, bottom, and left properties to adjust the element position with respect to its parent element.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS position absolute Example</title>

    <!-- Internal CSS -->
    <style>
        #parent-div {
            width: 500px;
            height: 400px;
            background-color: yellow;
            position: relative;
        }

        #child-div {
            width: 80px;
            height: 60px;
            background-color: red;
            position: absolute;
            left: 50px;
        }
    </style>
</head>

<body>
    <div id="parent-div">
        <div id="child-div">
        </div>
    </div>
</body>

</html>

fixed

Elements with position: fixed; are positioned relative to the viewport. They stay in the same place even when the page is scrolled.

You can use the top, right, bottom, and left properties to adjust the element position with respect to its viewport area.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS position fixed Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 80px;
            height: 60px;
            background-color: red;
            position: fixed;
            left: 50px;
        }
    </style>
</head>

<body>
    <div></div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <br>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <br>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <br>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <br>
    <br>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>

</html>

In the above example, we made the output section a little bit longer by adding some dummy paragraphs so that you can scroll the section to see the effect of fixed position.

sticky

Elements with position: sticky; combines features of both position: relative; and position: fixed;. When an element is set as sticky, it acts as a relatively positioned element until it reaches a specified scroll position. Once it reaches that position, it becomes fixed, staying in place relative to the container.

You must specify one edge using the CSS property top, right, bottom, or left beyond which the element becomes sticky once it reach the specified edge.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS position sticky Example</title>

    <!-- Internal CSS -->
    <style>
        #sticky-bar {
            width: 200px;
            height: 50px;
            background-color: violet;
            position: sticky;
            top: 0;
        }
    </style>
</head>

<body>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <div id="sticky-bar">
        <p>This is a sticky paragraph.</p>
    </div>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    <p>This is a sample paragraph.</p>
    </div>
</body>

</html>

Note: The position: sticky; will not work if no edge is specified or the parent element contains the CSS property overflow: hidden; or overflow: scroll; or overflow: auto;.


Previous Next
Dremendo

For over a decade, Dremendo has been recognized for providing quality education. We proudly introduce our newly open online learning platform, which offers free access to popular computer courses.

Our Courses
News Updates
© 2024 Dremendo. All Rights Reserved.