Question

如果我想完全创建一个响应式网站，我可以使用Position：Relative作为Div吗？我有心态认为它会产生问题，这不是最好的做法。

Answer 1

当然，您可以随时使用媒体查询添加/删除position属性。

@media (min-width: 768px) { .mySelector { position: relative } }

以上代码仅在浏览器宽度超过767px时才添加

Answer 2

是的，根据Matthew的回答，您可以在响应式网站上使用任何职位属性。它更了解他们在设计环境中做了什么。

这是一个很好的链接，解释了位置属性的不同方面。

https://www.youtube.com/watch?v=-vo0HzNHL3U

Answer 3

position: relative并不意味着自动移动元素（当使用极其不同的视口大小并使用固定值时可能会出现问题）：

如果您不使用left，right，top或bottom设置，则不会将任何内容移出正常流程，但随后{{ 1}}仍然有用。如果您使用position: relative，left，right或top（以及bottom）的相对值，则这些值将完全响应。

评论后的补充：

我添加了一个例子。实际上我以前错了，当你使用width进行水平居中时，不需要margin: 0 auto。但是我仍然在示例中使用它（两次），并且我在内部DIV中使用了position: relative的百分比值，从而将其垂直居中于另一个DIV（20％顶部和60％高度留下另外20％at底部）。更改大小 - 您不仅会看到更改绝对DIV大小，还会看到top参数的更改，这对默认top

无效

＆＃13;

position: static

＆＃13;

html, body {
  height: 100%;
  }
.x {
  margin: 0 auto;
  width: 80%;
  height: 50%;
  background: #fa0;
  }
.y {
  position: relative;
  top: 20%;
  margin: 0 auto;
  width: 50%;
  height: 60%;
  text-align: center;
  background: #a0f;
  }

＆＃13;

当我使用自适应设计方法时，我可以使用div的位置相对吗？

3 个答案: