Question

我是CSS的新手，也许是非常基本的问题。如果我被问到这个问题并且无法通过我找到，我会道歉，尽管我厌倦了搜索一下。

我正在尝试创建表单并遇到代码段。

HTML：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Material design sign up form</title>

  <link rel="stylesheet" href="css/style1.css">

</head>

<body>
    <div id="login-box">

    </div>
</body>
</html>

CSS：

body {
  margin: 0;
  padding: 0;
  background: #DDD;
  font-size: 16px;
  color: #222;
  font-family:  sans-serif;
  font-weight: 300;
}
#login-box {
  position: relative;
  margin: 5% auto;
  width: 600px;
  height: 400px;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

我的问题是： 我想知道为什么这段代码几乎将div放在页面的中心。

根据我的理解是在里面和使用位置：相对而我使用屏幕分辨率为1366 x 768.所以根据我的计算：

登录框应放置在1366 px的5％（这是正文尺寸）。
这意味着1366 * 5％= 68.3px。
虽然这几乎放到水平中心。

垂直方向放置在顶线下方近5％。

有趣的是，当我改变绝对位置时，它不会留下任何空间。

我在这里错过了一些非常基本的东西。

请你帮忙。

如何定位：相对;标签影响展示位置

0 个答案: