CSS - 为什么有这么多定位方式，哪一种是正确的方式？答案

【问题标题】：CSS - Why are there so many ways to position, and which is the right way?CSS - 为什么有这么多定位方式，哪一种是正确的方式？
【发布时间】：2016-07-29 07:36:32
【问题描述】：

这有点哲学问题，不是 100% 硬性的面向代码的问题，但它与编程标准有关，我希望它符合规则。

在学习 Web 开发时，我一直对定位很感兴趣。我的第一个菜鸟网站是这样的：

<body>
    <h1> Welcome to my website. </h1>
    <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br>
    <p> Copyright 2016 </p>
</body>

但是我一直觉得这样做很不安——毕竟，这个标签几乎从未在我看到的任何专业网站中使用过，在问过this question 之后，我明白它不允许任何额外的标记，也不是语义化的。

我寻找其他方法，然后偶然发现position: absolute。我基本上通过为页面上的每个元素设置手动位置来使用它，因为我不知道任何其他方式来使用position: absolute，而不是那样做。 网站在我的屏幕上看起来不错，但最轻微的调整大小就毁了它们。

寻找另一种解决方案，我只是想用margin 定位所有内容。例如，我会使用margin-top: 5% 而不是<br><br>。我现在仍然这样做，感觉很不对。

所以我只是在寻找一般性建议——大多数人是如何做到的？什么是最佳实践？显然有数百种方法可以做到这一点，我查看了许多指南和教程，但我就是不了解 CSS 定位。

【问题讨论】：

我会避免在页面的总体布局中使用绝对定位，正如您所说的“最轻微的调整大小会破坏它们”。我倾向于遵循的一般经验法则是从上到下使用 margin-bottom 来定位以下元素，结合浮动和清除是我发现的最佳工作方式，但是就像所有事情一样，它在很大程度上取决于项目。
为什么我觉得这个问题属于其他地方
@MCMXCII 谢谢！是的，我想我会这样做。仅使用边距进行定位对我来说似乎有点 hacky，但使用浮动/清除它似乎更人性化。
你的问题是什么？
这个问题要么太宽泛，基于意见或需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css

【解决方案1】：

四个最常用的位置值是initial, relative, absolute and fixed.

fixed 值用于将元素定位在主屏幕上的固定位置。

值absolute and relative 用于将元素放置在相对于父元素的固定位置。您需要将元素定义为absolute，并将其父元素定义为relative。

然后你可以这样做：

<style>
    body{
        position:relative;
    }
    #copyright{
        position:absolute;
        top:5%;
    }
</style>

<body>
    <h1> Welcome to my website. </h1>
    <p id="copyright"> Copyright 2016 </p>
</body>

For more information see w3schools

【讨论】：

所有答案都很好——但这个答案是“接受”的，因为它提供了一个例子。

【解决方案2】：

如果您选择position: absolute;，那是真的，您的页面将永远无法调整大小。如果 ouy 有利润就可以了。它比<br> 标签好得多。如果你在一行上有三个，你可以浮动：左；在每个<div> 上。它会完美契合。如果你缩小，那么新行上的第四个<div> 可能会出现，或者如果你放大，可能只有两个 div 在一行。

tl;博士使用 float: left; 进行响应式设计。

【讨论】：

【解决方案3】：

无论您想选择哪种方式，问题在于它应该在大多数设备上使用Material Design 和Bootstrap 等框架很好地呈现，这将帮助您实现这一目标，但我通常使用边距和边框，因为 div 是建筑物大多数专业网站的块。

【讨论】：

【解决方案4】：

positon:absolute;表示该元素相对于其第一个定位（非静态）祖先元素进行定位。

我同意@Blue 所说的可以使用保证金而不是<br>。您可以使用float: 进行响应式设计。

【讨论】：

我知道position: absolute 是什么，但定义并不是我想要的。不过float 的建议很有帮助：谢谢！

【解决方案5】：

我认为好的做法是使用边距来定位块。但是当我们遇到一些特殊情况时——页面上的某些元素超出了流，就需要使用绝对定位。但如果在我的工作中可能，我会尽量避免它

【讨论】：