绝对与相对位置宽度&高度 [英] absolute vs relative position width & height

问题描述

我知道什么是绝对&相对位置，但有些点仍然不清除我。
for reference

i know what is absolute & relative position but some points are still not cleared to me. for reference

css：

.rel{
    position:relative;
    background:red;
} 
.abs{
    position:absolute;
    background:blue;
}

html：

<div class="rel">rel</div>
<div class="abs">abs</div>

现在分数是：

• relative div自动占用100％的宽度，但绝对div只占用内容宽度。为什么？

• relative div takes 100% width automatically but absolute div only takes content width. why?

当我给予100％的高度在相对div没有效果，但绝对div需要100％的高度。为什么？

when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?

当我给margin-top：30px它的位移绝对div也，但当我给top：30px然后只有相对的div。为什么？

when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?

当我不给 top：0，left：0 它需要高于div高度。为什么？

when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?

推荐答案

1. position：absolute 从文档结构的正常流中删除有问题的元素。所以，除非你明确设置一个宽度，它不会知道有多宽。您可以显式设置 width：100％（如果这是您之后的效果）。

1. Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.

元素 position：relative 在整个行为方式与正常 position：static 元素相同。因此，除非父元素具有定义的高度，否则设置 height：100％将无效。相反，绝对定位的元素从文档流中移除，因此可以自由调整到它们包含的元素当前具有的任何高度。

An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.

这可能是与您的HTML中的父元素，但我不能进一步帮助，除非您提供您的页面的完整的HTML和CSS。

This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.

左侧属性为auto。这意味着浏览器将为您计算这些设置，如果没有 position：absolute ，则将它们设置为元素将被呈现的位置。

The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.

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