how do I properly position a button element with css?


Tags: html,css,button,position,element

Problem :

I am attempting to position my button to the top right of the header, just as the Netflix landing page has it.

here is my css:

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
}
#logBtn {
  float: right;
  height: 33px;
  width: 86px;
  color: honeydew;
  background-color: red;
  border-style: none;
  border-radius: 5px;
}

Here is my html:

<!DOCTYPE html>
<html>
  <head>
    <title>myPage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <header>
        <h1>Hello</h1>

        <button id="logBtn">Log In</button>
      </header>
    </body>
</html>

However my button is just pinned to the lower left of the header like so: enter image description here

how can i fix this issue?



Solution :

Run and Check out the code. Let me know if you need improvements

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  position:relative;
}
#logBtn {
  position:absolute;
  height: 33px;
  width: 86px;
  color: honeydew;
  background-color: red;
  border-style: none;
  border-radius: 5px;
  top:10px;
  right:10px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>myPage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <header>
        <h1>Hello</h1>

        <button id="logBtn">Log In</button>
      </header>
    </body>
</html>


    CSS Howto..

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    Align lists on showing or hiding

    How to scale multiple
    dynamically using min- and max-width?

    How to read/get the CSS background color of a row in a gridview

    How do I change the admin header color in Magento?

    How to vertically align items in horizontally ul list with images?

    CSS How to erase the border from the image link?

    How to show/hide content based on a css class

    How to include css file in a JavaFx Spring application

    How to replace direct image calling with sprites, in JavaScript?

    how to color the whole star icon when button is clicked

    How to align jQuery div to bottom left corner using CSS?

    How To Select Two classes with CSS?

    HTML/CSS: how to position forms? [closed]

    How to remove rounded from to select query in jquery?

    What is default z-Index of
    element in HTML, and how to get it using JavaScript?

    Showing Text When Hovering Over an Image Link

    how to create Active State in CSS Navigations

    how do i remove the tab from this css megamenu

    How to adjust the height of two objects floating next to each other according to the amount of content, using css

    How to apply css to div which has no class?

    CSS: How would I select a specific Text and hide it

    how to make smooth css transition

    how to do conditional css on table row?

    CSS How to use margins with different divs

    How to override css grouped styles

    how to apply css class condtionally in angularjs

    how to position divs within another div

    Css - How to override css for a table cell

    How to get Mouse Out effect in CSS