CSS 静态定位和相对定位的区别

Difference between static and relative positioning

提问by jrdioko

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

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

回答by Matthew Abbott

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, rightand bottomrules:

静态定位是元素的默认定位模型。它们显示在作为正常 HTML 流的一部分呈现的页面中。静态定位的元素不服从left，top，right和bottom规则：

Relative positioning allows you to specify a specific offset (left, topetc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a divI 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:

相对定位，可以指定一个特定的偏移量（left，top等等），这是相对于在HTML流动的元件的正常位置。因此，如果我在 a 中有一个文本框，div我可以在文本框上应用相对定位，使其显示在相对于它通常放置在以下位置的特定位置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: relativeis applied to a parent element in the hierarchy:

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

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).

..当然除非您的父元素用于overflow: ?确定滚动的行为（如果有）。

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

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

回答by user3233352

In answer to "why CSS would still implement position: static;" in one scenerio, using position:relative for a parent and position:absolute for the child limits the scaling width of the child. In a horizontal menu system, where you could have 'columns' of links, using 'width:auto' does not work with relative parents. In this case, changing it to 'static' will allow the width to be variable dependent on the content within.

回答“为什么 CSS 仍然会实现 position: static；” 在一个场景中，对父级使用 position:relative 对子级使用 position:absolute 限制子级的缩放宽度。在水平菜单系统中，您可以拥有链接的“列”，使用“宽度：自动”不适用于相关父项。在这种情况下，将其更改为“静态”将允许宽度根据其中的内容而变化。

I spent a good few hours wondering why I couldn't get my container to adjust based on the amount of content within it. Hope this helps!

我花了好几个小时想知道为什么我不能让我的容器根据其中的内容量进行调整。希望这可以帮助！

回答by Stoffe

You can see a simple overview here: W3School

你可以在这里看到一个简单的概述：W3School

Also, if I recall correctly, when declaring an element relative, it will by default stay in the same place as it otherwise should, but you gain the ability to absolutely position elements inside it relatively to this element, which I've found very useful in the past.

另外，如果我没记错的话，当声明一个元素相对时，默认情况下它会保持在同一个位置，但你可以获得相对于这个元素绝对定位其中的元素的能力，我发现这非常有用在过去。

回答by frontsideup

Position relative lets you use top/bottom/left/right for positioning. Static won't let you do this unless you use margin parameters. There's a difference between Top and margin-top.

相对位置让您可以使用上/下/左/右进行定位。除非您使用边距参数，否则静态不会让您这样做。Top 和 margin-top 是有区别的。

You won't need to use static much as it's default

您不需要使用静态太多，因为它是默认的

回答by AvadhootKulkarni

Relative position is relative to the normal flow. The relative position of that element (with offsets) is relative to the position where that element would have been normally if not moved.

相对位置是相对于正常流量的。该元素的相对位置（带有偏移量）是相对于该元素不移动时通常所处的位置。

回答by Connor Leech

Matthew Abbotthas a really good answer.

Matthew Abbott有一个非常好的答案。

Absolute and relative positioned items obey top, left, rightand bottomcommands (offsets) where static positioned items do not.

绝对和相对定位的项服从top，left，right和bottom命令（偏移），其中静态定位的内容没有。

Relatively positioned items move offsets from where they would normally be in the html.

相对定位的项目从它们通常在 html 中的位置移动偏移量。

Absolute positioned items move offsets from the document or the next relatively positioned element up the DOM tree.

绝对定位的项目从文档或下一个相对定位的元素向上移动 DOM 树的偏移量。

回答by Arif

Static :A STATIC positioned element is what are we get by DEFAULT (Normal positioning of objects).

静态：静态定位元素是我们通过 DEFAULT（对象的正常定位）得到的。

Relative :Relative to it's current position, but can be moved. Or A RELATIVE positioned element is positioned relative to ITSELF.

相对：相对于它的当前位置，但可以移动。或者 A RELATIVE 定位元素相对于 ITSELF 定位。

回答by Lakruwan Pathirage

static and relative are position attributes.relative is used for many uses. Not for one. But keep in mind that static and relative don't harm to normal document flow of the Html. static is the default position that when you write any element to Html. If an element has a relative position, that element can be positioned relative to its native place. when you want to adjust element from small spaces, use the relative position so that you don't need to add the margin, padding e.t.c if the element has a position relative and it has a child element. Here we can do measurements relatively to its parent. If you add width 10% to the child, that means (width+padding)x10%.but you don't add the relative keyword, you get widthx10%. Other than that, the most important usage of the relative is; you can position any element top of it.but you have to use "absolute" keyword to child.when adding absolute keyword to the child, the child is out of the normal document flow

静态和相对是位置属性。相对用于许多用途。不是为了一个。但请记住，静态和相对不会损害 Html 的正常文档流。static 是将任何元素写入 Html 时的默认位置。如果元素具有相对位置，则该元素可以相对于其原生位置进行定位。当您想从小空间调整元素时，请使用相对位置，这样如果元素具有相对位置并且它有子元素，则不需要添加边距、填充等。在这里，我们可以相对于其父级进行测量。如果为子项添加宽度 10%，则意味着 (width+padding)x10%。但是您不添加相对关键字，您将获得宽度 x10%。除此之外，relative 最重要的用法是；您可以将任何元素置于其顶部。