Difference between style = “position:absolute” and

2019-01-02 17:38发布

站内问答 / HTML/CSS
707 9 6

Can any one tell me the Difference between style = "position:absolute" and style = "position:relative" and how they differ in case I add it to div/span/input elements?

I am using absolute right now, but I want to explore relative as well. How will this change the positioning?

9条回答
不流泪的眼
2楼-- · 2019-01-02 17:50

position: absolute can be placed anywhere and remain there such as 0,0.

position: relative is placed with offset from the location it is originally placed in the browser.

查看更多
0人赞 添加讨论(0) 举报
看淡一切
3楼-- · 2019-01-02 17:54

You'll definitely want to check out this positioning article from A List Apart. Helped demystify CSS positioning (which seemed insane to me, prior to this article).

查看更多
0人赞 添加讨论(0) 举报
有味是清欢
4楼-- · 2019-01-02 18:01

Relative positioning: The element creates its own coordinate axes, at a location offset from the viewport coordinate axis. It is Part of document flow but shifted.

Absolute positioning: An element searches for the nearest available coordinate axes among its parent elements. The element is then positioned by specifying offsets from this coordinate axis. It removed from document normal flow.

enter image description here

Source

查看更多
0人赞 添加讨论(0) 举报
只靠听说
5楼-- · 2019-01-02 18:01

Relative:

  1. An element with position: relative; is positioned relative to its normal position.

  2. If you add no positioning attributes (top, left, bottom or right) on a relative element it will have no effect on it's positioning at all. It will behave exactly like a position: static element.

  3. But if you do add some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.

  4. An element with this type of positioning gets affected by other elements and it itself also affects others.

Absolute:

  1. An element with position: absolute; allows you to place any element exactly where you want it to be. You use the positioning attributes top, left, bottom. and right to set the location.

  2. It is placed relative to the nearest non-static ancestor. If there is no such container, it is placed relative to the page itself.

  3. It gets removed from the normal flow of elements on the page.

  4. An element with this type of positioning is not affected by other elements and also it doesn't affect flow of other elements.

See this self-explanatory example for better clarity. https://codepen.io/nyctophiliac/pen/BJMqjX

查看更多
0人赞 添加讨论(0) 举报
公子世无双
6楼-- · 2019-01-02 18:04

Absolute places the object (div, span, etc.) at an absolute forced location (usually determined in pixels) and relative will place it a certain amount away from where it's location would normally be. For example:

position:relative; left:-20px;

Might make the left side of the text disappear if it was within 20px to the left edge of the screen.

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
7楼-- · 2019-01-02 18:06

Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.

Using the position you specify with these attributes, the element is then placed at that position within its last ancestor element which has a position attribute of anything other than static (page elements default to static when no position attribute specified), or the document body (browser viewport) if no such ancestor exists.

For example, if I had this code:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

...the <div> would be positioned 20px from the top of the browser viewport, and 20px from the left edge of same.

However, if I did something like this:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

...then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.

Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.

For example, if I had this code:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

...then all three <span> elements would sit next to each other without overlapping.

If I set the second <span> to use relative positioning, like this:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

...then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.

Hope that clarifies things a bit.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)