如何在 CSS 中正确定位和缩放这些元素？

Question

我已经能够使用 html 和 css 在我的网页中正确定位和缩放一些元素，但是由于定位规则，我一直不知道如何用另外两个元素继续这个动作。

图片中的 V 形图标必须在标题为 "scroll down" 的最后一段下方，而且我还希望它能随屏幕尺寸缩放，因为我已经成功地对其他 text/elements 如你所见：

这里是 html:

<!DOCTYPE html>
<html>
  <head>
    <title>myWebpage</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="css/font-awesome.min.css"rel="stylesheet">

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

  <body>
      <header>
        <h1>Hellloooooooooooooo!</h1>
        <p id="first-p">Welcome All!<br>Make Yourself at home.</p>
        <p id="secondary-p">Scroll down.</p>
        <button id="logBtn">Log In</button>
        <button id="signBtn">Sign Up</button>
        <i class="fa fa-chevron-down fa-4x"></i>

      </header>
    </body>
 </html>

这里是 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/assests/books-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;
}
h1 {
  color: honeydew;
  font-family: "Helvetica Neue";
  font-size : 7.5vw;
  margin-bottom: 30px;
}
#first-p {
  color: honeydew;
  font-family: "Helvetica Neue";
  font-weight: lighter;
  font-style: normal;
  font-size : 3.5vw;
  margin-bottom: 50px;

}
#secondary-p {
  position: inherit;
  color: #FFD700;
  font-family: "Helvetica Neue";
  font-weight: lighter;
  font-style: normal;
  font-size : 2vw;
  margin-bottom: -90px;

}
.fa {
  color: #FFD700;

}

那么如何在我的网页上将 .fa 正确放置在 #secondary-p 下并缩放它呢？

Answer 1

只需从 #secondary-p 中删除 margin-bottom : -90px;，这将使 Cheveron 图标位于下方 向下滚动 (#sencondary-p)。

为了缩放 Cheveron 图标，将 font-size 添加到它，并在 vw 中添加一个值。像这样：-

.fa{
  color : #FFD700;
  font-size : 4vw;
}

演示 is here.

更新

为了将它们向下移动一点，将 .fa 元素和 #sencondary-p 元素包裹在 div 中，并给 div 一些 margin-top .像这样：-

HTML:-

<div id="wrapper">
  <p id="sencondary-p">Scroll Down</p>
  <i class = "fa fa-chevron-down fa-4x"></i>
</div>

CSS:-

#wrapper{
  margin-top : 100px; /*Increase the value to shift more down*/
}

查看更新后的演示 here.

Answer 2

将人字形放在 div 内并设置 div 的位置。（使用position:static，会保持位置一致。）

如何在 CSS 中正确定位和缩放这些元素？

how do I properly position & scale these elements in CSS?

html

css

position

scale

glyphicons