How to Make a Responsive Floating Element using CSS

In this tutorial, I will show you how to make a responsive floating box or element that will be sticky and always appear in the center, corner or anywhere of your Browser window or screen.

A floating element can be a login form or registration form that is usually displayed within a Modal dialogue or pop-up light-box. It can be a navigation menu, a pop-up or zoom icon of an image, next or previous button on a slider, or any sticky element that will always appear anywhere on your webpage.

You required skills to make the floating element are ─

  • Use of HTML class Attribute
  • CSS position Property
  • CSS width & height Property
  • CSS left & top Property
  • CSS margin Property

My purpose of this tutorial is actually to give you a basic knowledge how a floating element works when CSS code is used.

Making Responsive Floating Element

Here is the basic HTML code of the floating element. To practice yourself, create an .html file (e.g. index.html).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Floating Element using CSS</title>
</head>
<body>
    <div class="floating-box-container">
        <div class="floating-box"></div>
    </div>
</body>
</html>

Now I am going to give the style to the element. To make you understand better, I will use CSS codes step by step and will try to make you understand how the codes actually works.

Step #1:

Use the following codes before </head> tag.

<style>
    .floating-box {
        background-color: #ddd;
        box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
        position: fixed;
        width: 250px;
        height: 250px;
        left: 50%;
        top: 50%;
        z-index: 9;
    }
</style>
  • background-color: A background color is used, you can change to another color.
  • box-shadow: It’s optional. After using this, you see a shadow around the box.
  • position: Position fixed is used that will always be sticky.
  • width & height: width 250px & height 250px is specified.
  • left: The box is at 50% left of the Browser window or screen.
  • top: The box is at 50% top of the Browser window or screen.
  • z-index: It specifies the z-order, which one covers the other.

After using the CSS codes above, you will see the result is actually not in the center of the window. The box, right now, is working like the following image ─

How to Make a Responsive Floating Element using CSS (Step-1)

Step #2:

Now I am going to make the box in the exact center of the window. To make this, I have to use negative value of the margin property against the box width and height.

As the box width and height is specified in 250px, that’s why I will use negative margin: half of the total width to left and half of the total height to top.

  • margin-left: As left: 50% is used, so margin-left: -150px (250/2=150) has to be used.
  • margin-top: As top: 50% is used, so margin-top: -150px (250/2=150) has to be used.

Here is the full CSS codes that will make the box in exact center of the window or screen. Use the code before </head> tag.

<style>
    .floating-box {
        background-color: #ddd;
        box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
        position: fixed;
        width: 250px;
        height: 250px;
        left: 50%;
        top: 50%;
        z-index: 9;
        margin-left: -125px;
        margin-top: -125px;
    }
</style>

After using the CSS codes above, you will see the box is in the exact center of the window. The box is now working like the following image ─

How to Make a Responsive Floating Element using CSS (Final Step)

Full HTML & CSS Codes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .floating-box {
            background-color: #ddd;
            box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
            position: fixed;
            width: 250px;
            height: 250px;
            left: 50%;
            top: 50%;
            margin-left: -125px;
            margin-top: -125px;
            z-index: 9;
        }
    </style>
</head>
<body>
<div class="floating-box-container">
    <div class="floating-box"></div>
</div>
</body>
</html>

Live Demo: Responsive Floating Element using CSS

Demo: Responsive Floating Element in the center of the Window

Demo: Responsive Floating Element in the Bottom Right Corner of the Window