CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Position

The CSS position property is used to set position for an element.

The CSS position property also used to place an element behind another.

The Position property can take the following values :-

  • static : Static positioned elements are not affected by the top, bottom, left, and right properties.
  • relative : is positioned relative to its normal position.
  • fixed : is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  • absolute : is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
  • sticky : is positioned based on the user's scroll position.

  • Example : Position

    <!DOCTYPE html>
    div.static {
    position: static;
    border: 3px solid blue;
    div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    border: 3px solid blue;
    div.relative {
    position: relative;
    width: 200px;
    height: 150px;
    border: 3px solid blue;
    div.absolute {
    position: absolute;
    top: 60px;
    right: 0;
    width: 100px;
    height: 80px;
    border: 3px solid blue;
    div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid blue;

    <div class="static">
    This element has position: static;
    <div class="relative">
    This element has position: relative;
    <div class="fixed">
    This element has position: fixed;
    <div class="relative">This element has position: relative;
    <div class="absolute">This element has position: absolute;</div>
    <div class="sticky">This element has position: sticky;</div>

    When the above code is compiled , it produces the following result.


    css position