静态定位和相对定位的区别 [英] Difference between static and relative positioning

问题描述

在 CSS 中，静态(默认)定位和相对定位有什么区别?

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

推荐答案

静态定位是元素的默认定位模型.它们显示在作为正常 HTML 流的一部分呈现的页面中.静态定位的元素不遵守left、top、right 和bottom 规则:

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:

相对定位允许您指定相对于元素在 HTML 流中的正常位置的特定偏移量(left、top 等).因此，如果我在 div 中有一个文本框，我可以在文本框上应用相对定位，使其显示在相对于它通常放置在 div 中的位置的特定位置:

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:

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

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:

..当然除非你的父元素使用 overflow: ? 来确定滚动的行为(如果有的话).

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

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

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

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