如何使用 [ position : fixed ] 设置 dom 节点的正确宽度？

【问题标题】：How to set dom node's correct width with [ position : fixed ]?如何使用 [ position : fixed ] 设置 dom 节点的正确宽度？
【发布时间】：2016-10-24 05:11:12
【问题描述】：

我需要一个使用position : fixed 固定在页面顶部的 div。

但是如果浏览器的大小改变了，div的宽度也会改变，因为固定节点的父节点是屏幕而不是父DOM节点。

如何设置position : fixed父节点对应的节点宽度不全屏？

【问题讨论】：

你不能用纯 css 做到这一点。固定位置总是相对于文档，而不是相对于其父元素。您必须使用 javascript 计算所需元素的宽度，然后将其应用于固定元素。

标签： html css width fixed

【解决方案1】：

您不能使position:fixed 相对于任何父级。它始终是浏览器窗口。

但是，您可以使position:absolute 相对于另一个对象。使用margin 设置-x 或-y，您甚至可以让它悬停在原始元素的位置上，但仍然是相对的。

要使position:fixed 或absolute 分别相对于窗口大小或父大小，请使用百分比：

p {
  position:fixed;
  left:10%;
  right:10%;
  top:10%;
  bottom:10%;
  background-color:green;
  }

<div>
  <p>test</p>
</div>

【讨论】：