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

问题描述

位置相对&

绝对CSS定位

position：absolute;

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

  position：absolute; 
  

这告诉浏览器，要放置的内容应该从文档的正常流程中删除并将其放置在页面上的确切位置。它不会影响HTML之前或之后的元素如何定位在网页上，除非您覆盖它，否则它将受到父母的定位。

如果要将元素从文档窗口顶部定位10个像素，则可以使用顶部偏移量将其定位到绝对定位位置：

  position：absolute; 
 top：10px; 
 

此元素将始终从页面顶部显示10px，而不管内容是否通过，

这四个定位属性是：

1. top


2. right


3. 
   
   

   要使用它们，您需要将它们视为偏移属性。换句话说，位于右边2px的元素不会向右移动2px。它的右边偏移从窗口的右边2px。

   
   
   

   <$>

   c $ c> position：relative;
   
   
   

   相对定位使用与绝对定位相同的四个定位属性。但是不是将元素的位置放在浏览器视口上，而是从元素仍在正常流向的位置开始。

   
   
   

   例如，如果您的网页上有三个段落，而第三个段落在其上放置了相对样式，则其位置将根据其当前位置（而不是从视图端口的原始侧）进行偏移。

   
   
   

   第1段。

   
   
   

   第2段。

   
   第3段。
   
   在上面的例子中，第三段将位于容器元素左侧的3em，但仍位于前两个段落的下方。它将保持在文档的正常流动中，并且仅稍微偏移。如果你把它改为position：absolute;
   
   
   

   注意：

   p>
   
   
   
   

   • 绝对定位的元素的默认宽度是其中的内容的宽度，不像相对定位在它的默认宽度是它可以填充的空间的100％。

   
   
   • 你可以有与绝对定位的元素重叠的元素，而你不能做相对定位元素（原生，即不使用负边距/定位）

   
   
   
   
   

   ---

   
   
   

   批次：此资源

   
   

   What is difference between position relative & position absolute and when to use which one in css?

   解决方案

   Absolute CSS Positioning

   position: absolute;

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

   position: absolute;
   

   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.

   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;
   

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

   The four positioning properties are:

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

   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 2px. The same is true for the other three.

   Relative Positioning

   position: relative;

   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.

   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.

   Paragraph 1.

   Paragraph 2.

   Paragraph 3.
   In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.

   Notes:

   • 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屋！