Login With Github

CSS Positions

The position property specifies different positioning modes for elements. Here are the 5 kinds of position property values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

If an element has been set the position property (except for static), you can change the position of the element by setting the top, left, bottom, and right properties. Of course, these properties work in different ways based different positioning modes.

position: static;

This is the default positioning mode of HTML elements, that is, no positioning. The element will be displayed in the document in a default location according to its type. In general, block-level elements will be displayed vertically from top to bottom, and inline elements will be displayed horizontally. For more information on how elements are displayed, you can refer to the section of CSS Display.

If we don't set the position property for the element or set the position property to static, then the top, left, bottom, and right properties will not affect the position of the element.

Here is an example:

div.static {
    position: static;
    border: 2px solid red;
    top: 30px;
}

As you can see, the top property does not affect the position of the <div> element.

position: relative;

If we set the position property of the element to relative, then the element will be positioned relative to its default position.

You can set the top, left, bottom, and right properties to change the offset of the element relative to its default position. For example:

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

However, the page still retains the empty space left after the element's offset. These empty spaces won't be occupied by other elements. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorialdocs(tutorialdocs.com)</title>
<style>
h2.pos_top
{
	position:relative;
	top:-50px;
}
</style>
</head>

<body>
<h2>This is a header without positioning</h2>
<h2 class="pos_top">This heading is offset 50px upwards relative to its default position</h2>
<p>This is a normal paragraph.</p>
</body>

</html>

The relatively positioned elements are often used as containers for the absolutely positioned elements.

position: absolute;

If we set the position property of an element to absolute, then the element will be positioned relative to the nearest positioned ancestor element. If there is no ancestor element, then it will be positioned relative to the <body> element.

The location of an absolutely positioned element is independent of the document flow, and therefore it doesn't take up the space of the document flow. This is completely different from the relative positioning.

Note: The "positioned" element refers to the element which has been set the position property (except for static).

Here is an example:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

position: fixed;

If we set the position property of an element to fixed, then the element will be fixed to a certain position in the relative view and will not move as the page scrolls. You can set the top, left, bottom, and right properties to determine the initial position of the element.

Here is an example:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    border: 2px solid red;
}

Note: You should declare !DOCTYPE to support fixed positioning in IE7 and IE8.

The element that is fixed positioning doesn't occupy space because the position of which is independent of the document flow.

The elements which are fixed positioning can be overlapped with other elements.

position: sticky;

If we set the position property of an element to sticky, the positioning mode of the element will be changed as the page scrolls.

with the page scrolling, the positioning mode of the element will be switched between relative and fixed depending on whether it is in the view or not.

Only at least one of the top, left, bottom, right properties is set, position: sticky will works.

Here is an example:

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

Note: Sticky positioning is not supported in Internet Explorer, Edge 15 and earlier IE versions. And the prefix of -webkit- is required in Safari.

0 Comment

temp