静态和相对定位之间的差异 [英] Difference between static and relative positioning

问题描述

在CSS中，静态（默认）定位和相对定位之间的区别是什么？

解决方案

元素的定位模型。它们显示在作为正常HTML流的一部分呈现的页面中。静态定位元素不遵守左，顶部，右和底部规则：

相对定位允许您指定一个特定的偏移（ left ， top 等），它相对于元素在HTML流中的正常位置。因此，如果我在一个 div 中有一个文本框，我可以应用相对定位在文本框，以显示在特定的地方相对于它通常放在 div ：

还有绝对定位您可以指定元素相对于整个文档或元素树上下一个相对定位的元素的确切位置：

当 position：relative 应用于层次结构中的父元素时：

>

请注意我们的绝对位置元素是否被相对定位的元素绑定。

最后有固定。固定定位将元素限制在视口中的特定位置，该位置在滚动期间保持原位：

您还可以观察固定位置元素不会导致滚动的行为，因为它们不被视口约束：

>

元素仍然被视口绑定，并将导致滚动：

..除非你的父元素使用了，否则绝对定位的元素仍然受到视口的边界的影响。 overflow：？以确定滚动的行为（如果有）。

使用绝对定位和固定定位，元素将从HTML流中取出。

In CSS, what is the difference between static (default) positioning and relative positioning?

解决方案

Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:

Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:

There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:

And when a position: relative is applied to a parent element in the hierarchy:

Note how our absolutely-position element is bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:

Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:

..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

With absolute positioning and fixed positioning, the elements are taken out of HTML flow.

这篇关于静态和相对定位之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！