Snippets Collections
<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>
star

Tue Sep 13 2022 07:40:31 GMT+0000 (UTC) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #fixed

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension