html - 放大/缩小时如何使阴影框保持在同一位置？

Question

即使我在网页上放大或缩小，我也试图让影子盒留在同一个地方。我尝试用 procents 而不是像素来制作尺寸，但我不知道我应该使用什么属性组合。

这是我想要达到的结果：来自这里的外部阴影盒效果http://www.harpersbazaar.com/

#shadowbox {
margin: 5px 450px 5px;
box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.75);
position: relative;
z-index: 0;
width: auto;
border-top: 1px solid rgb(223, 223, 223);
initialHeight: 100%;

这是实现它的页面：http: //filldevoid.com/test/（它在同一个谷歌浏览器中显示不同，但在不同的计算机上））

（我希望阴影框在内容方面位于同一个位置（我的意思是，在设计中处于相同位置，即使我放大）我希望内容很好地位于框内，例如 harpersbazar 示例。 )

Answer 1

尝试这个

 #shadowbox{
   width:1060px;
   margin:0 auto;
    box-shadow:0 0 5px rgba(150, 150, 150, 0.75);
   border-top:1px solid #DFDFDF;
    z-index:1;
   position:relative;
        }

Answer 2

添加这个：

#shadowbox{


    width: 970px;
    left: 50%;
    margin-left: -485px;


}