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

问题描述

position:relative 和 position: absolute 在 CSS 中有什么区别?什么时候应该使用它们?

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

推荐答案

Absolute CSS Positioning

位置:绝对；

绝对定位是最容易理解的.你从 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. 顶部
2. 对
3. 底部
4. 左

要使用它们，您需要将它们视为偏移属性.换句话说，位于 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.

相对定位

位置:相对；

相对定位使用与 absolute 定位相同的四个定位属性.但是，它不是基于浏览器视图端口来确定元素的位置，而是从元素仍处于正常流程中的位置开始.

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)

大量来自:此资源

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