【发布时间】：2019-03-01 12:32:57
【问题描述】：
我正在尝试创建一个包含 2 列的网格：
1) 左侧窄固定位置侧边栏
2）右侧主要内容的宽栏。
根据this post的说法，固定位置的网格项有问题。一种回应是：
将您的内容包装在 div 中并将 div 设置为 position: fixed。
作者成功提交了该技术的demonstration。此处，固定侧边栏位于屏幕右侧。
由于我需要左侧的固定侧边栏，因此我采用了该技术，如图here。我的改编基本上是为侧边栏中覆盖的
提供 width：
aside div {
width: 200px;
margin: 0;
padding: 0;
border: 1px solid blue;
/* padding: 0 15px 0 5px; */
position: fixed;
}
调整原则上有效，但由于某种原因，叠加层向右偏移了一小部分，如蓝色边框所示（用于调试目的）。结果，侧边栏中的文本溢出，文本换行发生在侧边栏之外。
1) 为什么会发生这种情况？
2) 是否可以精确地 覆盖网格侧边栏上的固定位置 div？如codepen中所示，我已经尝试了某些元素的边距和填充，但它们没有帮助。我也尝试过减小覆盖的宽度，如图here。这是可行的，但是是任意的。
【问题讨论】：
-
在side div中使用left:0不就简单了吗？
-
"2) 固定位置的 div 是否可以精确叠加到网格侧边栏上？您现在将其相对于屏幕定位。为了将其定位在网格中，最好不要固定。在提供的示例中，使用粘性位置不是更好吗？
-
这两个建议都很棒。我想我忽略了两者。现在，我选择第一个。谢谢。
-
@ndvo，我试过
position: stickyhere，但覆盖的内容再次向右延伸。有什么建议吗？
标签： html css css-position css-grid