静态定位和相对定位的区别 [英] 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屋!