css - div fixed inside div relative - 两者大小相同但固定的更大？

Question

我有一个 div 固定在一个相对的里面。

我的问题是，固定的 div 比另一个大，但它们的大小相同:

<div id=all>

  <div id=top></div>

</div>

.

#all{
  width:80%;
  height:100px;
  border:1px solid #000;
  position:relative;
}

#top{
  width:80%;
  height:100px;
  position:fixed;
  background:rgba(255,0,0,.5);
}

https://jsfiddle.net/y7yc0n21/

我需要修复 div 顶部。怎么了？为什么 div top 比 div all 大？

Answer 1

固定元素的宽度是根据视口(viewport)宽度计算的，而另一个元素的宽度是根据其父元素的宽度计算的，在本例中为 body。

并且 body 的宽度与视口(viewport)宽度不同，因为 body 从默认样式表中获得了默认的边距和/或填充 - 所以您采用了两个不同输入值的 80%，因此结果也不同。

去掉body的默认margin/padding，问题就解决了:

body {
  margin:0;
  padding:0;
}

https://jsfiddle.net/y7yc0n21/2/