Question

朋友们我想知道如果我声明任何div为位置固定/绝对（不提及其宽度为100％或其他宽度值），那么为什么它会丢失其默认值？因为我知道它是一个块级元素，占据视口的全宽，所以当我把它作为一个固定或绝对的位置然后为什么它看起来像内联块以及为什么它不是累积的全宽视口？

<style>
div{background:red; padding:20px 0;/*width:100%*/}
 div.demo{position:fixed;top:0; left:0;background:olive; 
  /*width:100%;*/}
</style>

<body>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
 <div class="demo">lorem ipsum</div>
 <div>lorem ipsum</div>
 <div>lorem ipsum</div>
</body>

Answer 1

具有位置：固定; 的元素相对于视口定位，这意味着即使页面滚动也始终保持在同一位置，

如果你没有设置它的宽度，它的内容宽度将显示为默认宽度

如果您将其宽度设置为百分比，则宽度将以与视口对应的百分比显示。

所以如果你想要一个完整宽度的视口到你的div，设置它的宽度：100％;我在下面添加了一个片段。

<style>
div{background:red; padding:20px 0;/*width:100%*/}
 div.demo{position:fixed;top:0; left:0;background:olive; 
  width:100%;}
</style>

<body>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
 <div class="demo">lorem ipsum</div>
 <div>lorem ipsum</div>
 <div>lorem ipsum</div>
</body>

Answer 2

来自w3c wiki on absolute positioning：

绝对定位的元素将收缩包装以适合其内容除非你指定它们的尺寸。

在块级元素中声明的位置是固定的或绝对的

2 个答案: