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/

Answer 2

如果指定

body {
   margin:0;
}

它们将变成相同的宽度。

此外，我认为这不是您想要的，因为相对于视口计算固定。

<强>固定不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。

https://developer.mozilla.org/en/docs/Web/CSS/position

Answer 3

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

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

Answer 4

如果你提供任何元素

＆＃13;

position: fixed

＆＃13;

它使元素相对于视口而不是它的offsetParent。因此，div＆＃39; top＆＃39;的宽度根据视口的宽度计算80％，而不是基于其父div＆＃39; all＆＃39;。所以，你的内部div的宽度大于外部的div。

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

4 个答案: