如何使用 css 正确定位按钮元素？

Question

我正在尝试将我的按钮放置在 header 的右上角，就像 Netflix 着陆页那样。

这是我的 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;
}

这是我的 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>

但是我的按钮只是固定在 header 的左下方，如下所示：

我该如何解决这个问题？

Answer 1

尝试：

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;
  margin: 0 0 10px 10px;
}

https://jsfiddle.net/fergnab/9m2veg5j/1/

Answer 2

运行并查看代码。如果您需要改进，请告诉我

* {
  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>

Answer 3

您可以尝试添加到您的按钮的是

CSS

position:absolute;
top:0;
right:0;

如何使用 css 正确定位按钮元素？

how do I properly position a button element with css?

html

css

position

element

button

CSS