div固定在div相对内 - 相同大小但固定更大？

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 top来修复.怎么了？为什么div top比div大all？

Answer 1

固定元素的宽度是根据视口宽度计算的,而另一个的宽度是根据其父元素的宽度计算的,body在这种情况下.

并且body的宽度与视口宽度不同,因为body从默认样式表中获取默认边距和/或填充 - 因此您将获取两个不同输入值的80%,因此结果也不同.

消除正文的默认边距/填充,问题就消失了:

body {
  margin:0;
  padding:0;
}

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