相对位置还是绝对位置? [英] Position Relative vs Absolute?

问题描述

CSS中的position: relative和position: absolute有什么区别?以及什么时候应该使用哪个?

What is the difference between position: relative and position: absolute in CSS? And when should you use which?

推荐答案

绝对CSS定位

position: absolute;

绝对定位是最容易理解的.您从CSS position属性开始:

Absolute positioning is the easiest to understand. You start with the CSS position property:

position: absolute;

这告诉浏览器应该将任何要放置的位置从正常的文档流程中删除，并将放置在页面上的确切位置.它不会影响HTML中在它之前或之后的元素在网页上的放置方式，但是 会受其父对象的位置的约束，除非您对其进行覆盖.

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.

如果要将元素放置在距文档窗口顶部10像素处，则可以使用top偏移量将position偏移到该位置，并进行absolute定位:

If you want to position an element 10 pixels from the top of the document window, you would use the top offset to position it there with absolute positioning:

position: absolute;
top: 10px;

此元素将始终从页面顶部开始显示10px，而不管内容(在视觉上)在元素的下方，上方或上方通过什么内容.

This element will then always display 10px from the top of the page regardless of what content passes through, under or over the element (visually).

四个定位属性是:

1. top
2. right
3. bottom
4. left

1. top
2. right
3. bottom
4. left

要使用它们，您需要将它们视为偏移属性.换句话说，位于right: 2px的元素不会向右2px移动.它的右侧从窗口的右侧(或其上级覆盖父窗口)偏移了2px.其他三个也是一样.

To use them, you need to think of them as offset properties. In other words, an element positioned right: 2px is not moved right 2px. It's right side is offset from the right side of the window (or its position overriding parent) by 2px. The same is true for the other three.

相对排名

position: relative;

相对定位使用与absolute定位相同的四个定位属性.但是，不是将元素的位置基于浏览器查看端口，而是从元素仍在常规 flow 中的位置开始.

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

例如，如果您的网页上有三个段落，而第三个段落上放置了position: relative样式，则其位置将根据其当前位置而不是从视口的原始侧面偏移

For example, if you have three paragraphs on your Web page, and the third has a position: relative style placed on it, its position will be offset based on its current location-- not from the original sides of the view port.

第1段.

第2段.

注释:

• 绝对放置的元素的默认width是其中内容的宽度，与相对放置的元素(默认width是它可以填充的空间的100%)相对的位置不同.

• the default width of an element that is absolutely positioned is the width of the content within it, unlike an element that is relatively positioned where it's default width is 100% of the space it can fill.

您可以使元素与绝对定位的元素重叠，而您不能对相对定位的元素进行重叠(自然地，即，不使用负边距/定位)

You can have elements that overlap with absolutely positioned elements, whereas you cannot do this with relatively positioned elements (natively i.e without the use of negative margins/positioning)

很多物品来自:此资源

lots pulled from: this resource

这篇关于相对位置还是绝对位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！