How to Create Fixed Elements with CSS

How to Create an Sticky Element with CSS

The CSS position property defines the type of positioning for an HTML element on a website.

If you want to position an HTML element so that it is always in the same place on the page (even as a user scrolls down), you can use fixed positioning.

In this tutorial, I’m going show you how to display fixed elements.

Step #1. The HTML

Add this code in your site:

{codecitation}<div class=”block”>
Some content goes here.
</div>{/codecitation}

In my example I will add a bunch of dummy text from the Lorem Ipsum site.

Step #2. The CSS

Load the CSS code below into your site:

{codecitation css}.block {
position: fixed;
}{/codecitation}

Let’s add more CSS properties to make the block easily visible:

{codecitation css}.block {
position: fixed;
background: #2184cd;
color: #fff;
padding: 20px;
width: 400px;
}{/codecitation}

Step #3. The end result

Open your site in the browser. The div will be visible in exactly the same position, even if you scroll down:

position fixed CSS

View demo

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Prasad kulkarni

can i apply this in htmltopdf generator.

1
0
Would love your thoughts, please comment.x
()
x