Fixed Positioning in CSS

What is the position: absolute; in CSS: https://www.youtube.com/watch?v=co1KzxAQzEs

The position: fixed; works similar to the position: absolute; but there are two main differences.

Number 1: An element with a fixed position will always stay at the same place even if the page is scrolled.

Number 2: An element with the fixed position is always positioned relative to the body even if the parent element has the position: relative;

 <!DOCTYPE html>
    <html>
     <head>
        <title>Fixed Position</title>
   <style>
       h1 {
        position: fixed;
        left: 200px;
        bottom: 13px;
        right: 19px;
        top: 28px;
        background: #f542e6;
    }
   </style>
   </head>
   <body>
 
    <h1>Fixed Position</h1>
    <p style="font-size: 33px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam dolorem in earum porro velit! Illo, facilis nulla. Dolor necessitatibus ullam harum totam impedit numquam reiciendis nostrum repellendus corporis alias. Quae soluta ipsam obcaecati explicabo. Eum reiciendis, iure at odit blanditiis quae, totam, sapiente soluta itaque molestiae sint suscipit commodi. Suscipit atque eligendi numquam corrupti, laborum iure minus vitae ad? Sed praesentium quibusdam dolores quos laudantium omnis, vitae cumque ea architecto, blanditiis obcaecati aperiam corrupti atque, aspernatur reprehenderit veniam quo? Voluptatibus saepe tempore iure, nam nobis quidem repellendus dolore cumque! Maxime perspiciatis nam qui sed ut fugit delectus voluptate tempore, ipsum facere, alias at cum consequatur. Praesentium animi libero unde aliquam voluptatum deserunt porro optio et aliquid eveniet, earum magnam.Corporis eos amet doloribus obcaecati. Pariatur culpa laudantium numquam nostrum sapiente nemo corrupti optio! Numquam id neque autem repellendus provident aliquid, consequatur quisquam. Accusamus eaque similique voluptatem non, labore corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam dolorem in earum porro velit! Illo, facilis nulla. Dolor necessitatibus ullam harum totam impedit numquam reiciendis nostrum repellendus corporis alias. Quae soluta ipsam obcaecati explicabo. Eum reiciendis, iure at odit blanditiis quae, totam, sapiente soluta itaque molestiae sint suscipit commodi. Suscipit atque eligendi numquam corrupti, laborum iure minus vitae ad? Sed praesentium quibusdam dolores quos laudantium omnis, vitae cumque ea architecto, blanditiis obcaecati aperiam corrupti atque, aspernatur reprehenderit veniam quo? Voluptatibus saepe tempore iure, nam nobis quidem repellendus dolore cumque! Maxime perspiciatis nam qui sed ut fugit delectus voluptate tempore, ipsum facere, alias at cum consequatur. Praesentium animi libero unde aliquam voluptatum deserunt porro optio et aliquid eveniet, earum magnam.Corporis eos amet doloribus obcaecati. Pariatur culpa laudantium numquam nostrum sapiente nemo corrupti optio! Numquam id neque autem repellendus provident aliquid, consequatur quisquam. Accusamus eaque similique voluptatem non, labore corporis</p>
 
</body>
   </html>

NEW POSTS

Main Menu

Fixed Positioning in CSS

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

Fixed Positioning in CSS

You Might Also Like

No comments

Post a Comment

Pages