thiscodeWorks - Organizing the best of code online

<html>
    <head>
        <style>
  
  			/* Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Have no fear if you don't understand what this means, the example will help you to understand it better. */
  			.main-element {
                  position: sticky;
                  top: 10px;
                  background-color: yellow;
                  padding: 10px;
              }

              .parent-element {
                  position: relative;
                  height: 800px;
                  padding: 50px 10px;
                  background-color: #81adc8;
              }
  		
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #fixed

Fixed Property CSS

<html>
  	<head>
  		<style>
  
  			/* Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the <html> element.
One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen. */
  			
  			.main-element {
                position: fixed;
                bottom: 10px;
                left: 10px;
                background-color: yellow;
                padding: 10px;
            }

            html {
                height: 800px;
            }
  		</style>
  	</head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #absolute

Absolute Property CSS

<html>
  	<head>
  		<style>
  
  			/* Absolute - Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the element.

One thing to note is that an element with position: absolute is positioned relative to its closest positioned ancestor. That means that the parent element has to have a position value other than position: static.

If the closest parent element is not positioned, it is positioned relative to the next parent element that is positioned. If there's no positioned ancestor element, it is positioned relative to the <html> element.

Let's get back to our example. In this case, we change the position of the main element to position: absolute. We will also give its parent element a relative position so that it does not get positioned relative to the <html> element. */
  			
            .main-element {
            position: absolute;
            left: 10px;
            bottom: 10px;
            background-color: yellow;
            padding: 10px;
        }

            .parent-element {
              position: relative;
              height: 100px;
              padding: 10px;
              background-color: #81adc8;
            }

            .sibling-element {
                background: #f2f2f2;
                padding: 10px;
                border: 1px solid #81adc8;
            } 
  	    </style>
  	</head>
  
  
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #relative

Relative Position CSS

<html>
  	<head>
  		<style>
  
  			/* Relative - Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself. */				
  
  			.main-element {
              position: relative;
              left: 10px;
              bottom: 10px;
              background-color: yellow;
              padding: 10px;
        	}

            .sibling-element {
                padding: 10px;
                background-color: #f2f2f2;
            }
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #static

Static Property CSS

<html>
  <head>
    <style>
  	/* STATIC - This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.*/
      .main-element {
        position: static;
        left: 10px;
        bottom: 10px;
        background-color: yellow;
        padding: 10px;
    }

    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
    </style>
  </head>
  	
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #absolute #position #center

Absolute position element in center of a page

  .example{
          height: auto;
          position: absolute;
          bottom: 45px;
          width: 100%;
          max-width: 80rem;
          left:50%;
          transform: translate(-50%, 0);
  }

Sticky Position CSS

Fixed Property CSS

Absolute Property CSS

Relative Position CSS

Static Property CSS

Absolute position element in center of a page

Save snippets that work with our extensions