[英]how to make a shadowbox stay in the same place when zooming in/out?
I am trying to make a shadowbox stay in the same place even if i zoom in or out on a webpage. 即使我放大或缩小网页,我也想使阴影盒保留在同一位置。 I tried with making the sizes in procents rather then pixels, but i dont know exactly what combination of properties should i use.
我试过以百分号而不是像素为单位制作尺寸,但是我不知道我应该使用哪种属性组合。
This is the result i want to achieve: the exterior shadow box effect from here http://www.harpersbazaar.com/ 这是我要实现的结果:来自此处的外部阴影框效果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%;
this is the page where it is implemented: http://filldevoid.com/test/ (it shown different in the same google chrome, but on different computers)) 这是实现该页面的页面: http : //filldevoid.com/test/ (在同一Google chrome中,它在不同的计算机上显示为不同)
(i want the shadow box to be in the same place regarding the content (i mean, be in the same position in the design, even if i zoom in) i want the content to be nicely inside the box, like on harpersbazar example.) (我希望影子框在内容上位于相同的位置(即使我放大,我的意思是在设计中位于相同位置)我希望内容很好地位于框内,就像在harpersbazar示例中一样。 )
Add this: 添加:
#shadowbox{
width: 970px;
left: 50%;
margin-left: -485px;
}
try this 尝试这个
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.