How to Position a Fixed Element in the Top Right Corner using CSS ?

Last Updated : 21 Mar, 2024

In CSS, Positioning the fixed element in the top fight corner consists of maintaining the fixed position of the element by using Absolute Positioning or by using Flexbox Layout.

These are the following methods:

Table of Content

Using Absolute Positioning
Using Flexbox

Using Absolute Positioning

In this approach, we are using absolute positioning to fix the element in the top right corner. By setting the position property of the fixed element to absolute, and specifying top: 0 and right: 0, we make sure that the element is at the top right corner of the viewport.

Example: The below example uses Absolute Positioning to Position a Fixed Element in the Top Right Corner using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Using Absolute Positioning</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            position: relative;
            height: 100vh;
        }

        .Felement {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            background-color: green;
            color: #fff;
        }

        .content {
            padding: 20px;
        }

        h1 {
            color: green;
            text-align: center;
        }

        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="Felement">Visit GFG</div>
    <div class="content">
        <h1>GeeksforGeeks</h1>
        <h3>Using Absolute Positioning</h3>
    </div>
</body>

</html>

Output:

Screenshot-2024-03-13-at-11-42-05-Using-Absolute-Positioning

Using Flexbox

In this approach, we are using Flexbox to position the fixed element in the top right corner. By setting the container’s display property to flex and flex-direction to the column, the element is at the top of the viewport. The fixed element is positioned using position: fixed, top: 10px, and right: 10px.

Example: The below example uses Flexbox to Position a Fixed Element in the Top Right Corner using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Using Flexbox</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            background-color: rgb(255, 255, 255);
            color: green;
            text-align: center;
            padding: 10px 0;
        }

        .content {
            flex: 1;
            position: relative;
        }

        .fixed-element {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px;
            background-color: rgb(252, 255, 50);
            color: rgb(0, 0, 0);
        }

        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>GeeksforGeeks</h1>
        <h3>Using Flexbox</h3>
    </div>
    <div class="content">
        <div class="fixed-element">Hello GFG</div>
    </div>
</body>

</html>