logo标签列表

使用CSS定位HTML元素的最佳实践

htmlcss
5

我对CSS不是很熟悉，但正在使用它。

通常我使用内联或CSS方法的style元素来定位元素。

我不知道这是否是正确的问题，但是相对定位和绝对定位哪种方法更适合定位元素？

我使用类似于style="position:relative; left:100px; top:30px"的方式。

这样定位是否是正确的，能够在所有浏览器和移动设备中完全一致的出现呢？

如果有谁能分享他们的经验和指导，对许多初学者会有很大的帮助！

6个回答
7

绝对定位与其父元素无关。

当父元素具有相对定位时，使用绝对定位的子元素会相对于其父元素进行定位。

例如：

对于绝对定位，

<div><div style="position:absolute; top:0; left:0;">Abc</div></div>

上述代码会使div独立地置于顶部，不会对其父元素产生任何影响。
对于相对定位，
<div style="position:relative;"><div style="position:absolute; top:0; left:0;">Abc</div></div>

上述代码将使绝对定位的元素相对于其父元素进行依赖。
2
+1，但我觉得需要强调绝对定位取决于最近的具有定位的祖先元素，而不一定是直接父元素。当我学习时，我发现这个概念让我花了一些时间才理解清楚。 - Dre
1
澄清一下：在你的例子中，是的，最近的父元素是具有定位的最近祖先元素，因此它将成为绝对定位 div 的参考点。我之所以指出这并不总是适用，是因为在你的第一个例子中，最近的父元素没有定位，因此不会影响子元素。然而，在实际情况中，可能存在 DOM 中更高层次的另一个元素具有定位，这将影响子元素。请参见此 JSfiddle。我之所以提醒这一点，是因为这个问题曾经让我多次犯错！ - Dre
1
确切地说，您正在使用 #example_2 .parent 的特定性。但是让我们阅读一下OP的第一行，他说“我对CSS不太熟悉”。因此，这对于他来说是很好的信息，前提是他首先足够了解基础知识。感谢@Dre抽出时间提供更多信息。 - Nitesh
2
@Nathan_Lee 我同意，掌握基础知识很重要，但是不要过于沉迷于细节。然而，在我看来，了解与祖先相关的定位系统非常关键。恭喜我们俩！ - Dre
@NathanLee：非常感谢，这解决了我的疑惑！也感谢@Dre的关注和澄清！ - user2129623
显示剩余3条评论
4
这个链接里有一些很好的例子，点赞！ - Dre
1
没问题 :) 是的，这是一个非常简单和方便的网站，可以帮助理解CSS布局的基础知识。 - SaturnsEye
1

Mozilla的 MDN声明：

relative 将所有元素都按照未被定位的方式进行布局，然后调整元素的位置，而不改变布局（因此留下一个空白区域，该区域是元素在未被定位时所在的位置）。对于table-*-group、table-row、table-column、table-cell和table-caption元素，position:relative的效果是未定义的。

这基本上意味着每个元素都是一个块，紧接在前面的元素之后，并占用屏幕空间-随后的元素将占用其后的下一个可用空间。

absolute 不为元素保留空间。相反，将其相对于最近的已定位祖先或包含块的指定位置定位。绝对定位的框可以具有边距，它们不会与任何其他边距合并。

这意味着元素将出现在指定的位置（相对于其父级或带有position属性的最近的父级），而不考虑其他内容。

关于最佳实践 - 并没有固定的规定，取决于您想要达到的效果，这种情况下最佳实践是使用为此设计的position属性。

关于移动设备，您可能需要查看响应式网页设计，像Twitter Bootstrap这样的框架不仅可以为您处理这个问题，而且提供了一个非常方便快捷的方法来开始构建您的网站。

0
如果您不熟悉CSS，我强烈建议您使用CSS框架，例如Twitter Bootstrap（或另一个网格系统，例如960 grid，如果您不想使用Bootstrap的所有样式）。
因为从头开始使设计响应式是一件头疼的事情，您将浪费很多时间来使其正常工作。
3
但如果你走这条路，那你该如何学习呢？ - Dre
我同意，但当你是CSS的新手时，位置和响应性太高级了。在从头开始构建响应式布局之前，有很多其他事情需要学习和理解。使用框架可以在自己能够制作之前获得良好的结果。 - Elorfin
0

absolute 定位是最适合需要放置在 精确 坐标的元素。而 relative 定位将会根据元素所处位置加上坐标值。例如，如果我有一个 <p> 元素在一个 <div> 里面，我想要缩进它，我会使用 relative 和 left:15;。至于在所有浏览器中显示相同；这几乎是不可能的。总会有那么一个浏览器不符合标准。但是，absolute 和 relative 通常都可以工作。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接