position: fixed;居中后如何添加阴影切背景不能点击

您可以在具有固定定位的元素上使用CSS的box-shadow属性来添加阴影效果。要使背景不可点击，您可以使用CSS的pointer-events属性设置为none。

以下是示例代码：

.fixed-element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

在上述代码中，.fixed-element 是具有固定定位的元素的类名。通过设置top: 50%和left: 50%以及transform属性，您可以将元素居中定位。box-shadow属性用于添加阴影效果，并通过rgba(0, 0, 0, 0.5)设置阴影的颜色和透明度。最后，通过将pointer-events属性设置为none，使其背景不可点击。

请根据您的实际需求进行调整和修改。希望这可以帮助到您！

相关问题

#main { height: 500px; /设定主体内容高度/ overflow-y: scroll; /添加滚动条/ max-width: 1120px; /设定最大宽度/ margin: auto; /水平居中/ padding: 20px; /设定内边距/ background-color: #fff; /设定背景颜色/ box-shadow: 0 2px 4px rgba(0,0,0,.1); /添加阴影/ position: fixed; /设定固定定位/ top: 0; /距离页面顶部距离为0/ left: 210px; /距离页面左侧距离为210px/ }

这段代码的问题可能在于 `max-width: 1120px;`。这个属性设定了最大宽度为 1120 像素，如果您的屏幕宽度小于 1120 像素，则 `#main` 的宽度会随着屏幕宽度的缩小而缩小，直到达到屏幕宽度为止。如果您想让 `#main` 的宽度始终填满屏幕，可以考虑将 `max-width` 属性移除或者设置为 `100%`。另外，如果您的屏幕宽度比 `#main` 的总宽度小，那么您可能需要考虑添加一个水平滚动条。

#main { height: 500px; /*设定主体内容高度*/ overflow-y: scroll; /*添加滚动条*/ max-width: 100%; /*设定最大宽度*/ margin: auto; /*水平居中*/ padding: 20px; /*设定内边距*/ background-color: #fff; /*设定背景颜色*/ box-shadow: 0 2px 4px rgba(0,0,0,.1); /*添加阴影*/ position: fixed; /*设定固定定位*/ top: 0; /*距离页面顶部距离为0*/ left: 210px; /*距离页面左侧距离为210px*/ }

这个代码看起来没有问题，将 `max-width` 设为 `100%` 后，`#main` 的宽度将会随着屏幕宽度的变化而变化，始终填满整个屏幕。如果您的屏幕宽度比 `#main` 的总宽度小，那么水平滚动条就会出现，用户可以通过滚动条来查看被隐藏的内容。如果您仍然无法解决问题，建议提供更多的信息，例如您的网站链接或者更详细的代码片段，这样我才能更好地帮助您。