How to place a fixed button in the upper right in HTML-CodePudding

I have been unable to get this button to go into the far upper right corner, and it is also throwing off the alignment of my heading. I've tried several things but I am stuck.

<head>      
  <style>
      .myButton {
      padding: 0px;
      display:block;
      float:right;
      background-color: green;
      color: white;
      text-align:center;
    }

    </style>
    <a href="Login Page.html" class="myButton">Username</a>
    <h1 style="font-size:50px;">Leaderboard</h1>
</head>

CodePudding user response：

.myButton {
      padding: 0px;
      display:block;
      position:fixed;
      top:2x;
      right:0px;
      background-color: green;
      color: white;
      text-align:center;
    }

change top and right properties to adjust.

CodePudding user response：

HTML:

<a href="Login Page.html" class="myButton fixed to-top-right">Username</a>

CSS:

.myButton {
  padding: 0px;
  background-color: green;
  color: white;
  text-align:center;
}

.fixed {
    display: fixed;
}

.fixed.to-top-right {
    left: unset;
    right: 0;
    top: 0;
    bottom: unset;
}

CodePudding user response：

The best way to align a object in css without use of position fixed or absolute is to use diplay flex

Note that this not fixed

header{
    display: flex;
    width: 100%;
    }
header a{
    margin-left: auto;
    }

<header>
    <a href="#">btn</a>
</header>

This is fixed

  header a{
    position: fixed;
    top:0;
    right: 0;
    padding: 5px;
}

<header>
    <a href="#">btn</a>
</header>