Question

div1.innerHTML = "ab ab ab ab ab";

#div0 {
        position: absolute;
    }

#div1 {
        position: absolute;
        width: auto;
    }

<div id="div0">    
    <div id="div1"></div>
</div>

div1中的文本将以空格分隔。 Div1将是一个窄而高的块。

如果div1的位置设置为静态，相对或固定，则div将拉伸以适合文本的宽度。

我想详细了解DIV元素的这种行为。

在这种情况下，为什么“固定”与“绝对”不同，并且这种行为是标准的？（我特别关心这个问题。）

更新：我想我找到了答案。我没有设置div1容器的宽度。容器处于原位。因此其宽度为0，而div1的宽度也为0。如果div1设置为fixed，则其父级将是窗口或视口。因此div1的宽度将足够长。 Code at Fiddle

在原产地问题中，我并没有要求使用该容器。抱歉。

PS：我使用html / css多年。但是我总是会遇到一些简单，奇怪和令人惊讶的问题。令人沮丧。

Answer 1

我将把这个问题分为两部分，第一个是具有实际代码的问题，第二个是position属性如何工作。对于前者，我认为我们需要更多的代码来了解您的情况，第二部分，

position属性可以具有以下值，

静态默认值。元素按顺序呈现，就像它们出现在文档流中一样
绝对相对于其第一个定位（非静态）祖先元素定位元素
固定：该元素相对于浏览器窗口定位
相对元素相对于其正常位置定位，因此“ left：20px”会将元素的LEFT位置增加20个像素。

固定和绝对之间的区别在于，绝对是指相对于其祖先元素设置元素的位置。通常，我们将position：'relative'赋予父元素，然后使用postion：'absolute'来定义子元素的位置，例如

<div style="position:relative">
 <img style="position: absolute, top:10px">
</div>

在这里，我们首先设置div的位置，然后设置图像的顶部距父div的顶部20像素（即，其位置相对于div）

现在，以相同的示例为例，固定子元素的位置将相对于浏览器的位置

<div style="position:relative">
 <img style="position: fixed, margin-top:50px">
</div>

现在，无论父div位于何处，该图片从浏览器顶部开始都是50。父级可能位于页面底部，但div总是距页面顶部50px

因此对于绝对值和固定值，无论父容器如何，孩子都有可能跳出父容器。