Html 纯CSS3响应型灯箱半屏幕显示

使用纯CSS和HTML创建灯箱效果，无需JS。图像出现在屏幕右侧，一半被切断，部分位于导航栏下方。屏幕的一半在图像后面有阴影

除了偏离中心和在导航装置后面之外，它似乎还能工作。从手头的代码来看，是否有任何迹象表明它可能正在这样做？如果有必要，我很乐意发布更多的代码。谢谢大家!

/*消除填充，使缩略图居中*/
身体，
html{
填充：0；
保证金：0；
文本对齐：居中；
浮动：左；
}
/*设置缩略图的样式*/
a、 灯箱img{
高度：150像素；
边框：3倍纯白；
盒子阴影：0px 0px 8px rgba（0,0,0,0.3）；
利润率：94px 20px 20px 20px；
}
/*设置灯箱的样式，将其从视线中移除并添加淡入过渡*/
.灯箱目标{
位置：固定；
前-100%；
宽度：100%；
背景：rgba（0,0,0,0.7）；
宽度：100%；
不透明度：0；
-webkit过渡：不透明度。5s易入易出；
-moz过渡：不透明度。5s缓进缓出；
-o型过渡：不透明度。5s缓进缓出；
过渡：不透明度。5s缓进缓出；
溢出：隐藏；
明确：两者皆有；
}
/*设置灯箱图像的样式，使其垂直和水平居中，添加放大过渡，并使用边距和绝对位置的组合使其响应*/
.灯箱目标img{
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
最大高度：0%；
最大宽度：0%；
边框：3倍纯白；
盒子阴影：0px 0px 8px rgba（0,0,0,0.3）；
框大小：边框框；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
}
/*设置闭合链接的样式，添加向下滑动过渡*/
a、 灯箱关闭{
显示：块；
宽度：50px；
高度：50px；
框大小：边框框；
背景：白色；
颜色：黑色；
文字装饰：无；
位置：绝对位置；
顶部：-80px；
右：0；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
}
/*提供“X”的一部分，以消除闭合链接中的图像*/
a、 灯箱关闭：之前{
内容：“；
显示：块；
高度：30px；
宽度：1px；
背景：黑色；
位置：绝对位置；
左：26px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
/*提供部分“X”以从关闭链接中消除图像*/
a、 灯箱关闭：之后{
内容：“；
显示：块；
高度：30px；
宽度：1px；
背景：黑色；
位置：绝对位置；
左：26px；
顶部：10px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
/*使用：target伪类在单击.lightbox目标锚点时执行动画*/
.灯箱目标：目标{
不透明度：1；
排名：0；
底部：0；
}
.灯箱目标：目标img{
最大高度：100%；
最大宽度：100%；
}
.灯箱目标：目标a.灯箱关闭{
顶部：0px；
}

您当前的代码工作正常。包括您正在使用的其他代码。在本网站上运行此代码时，会显示此图像，该图像确实居中显示，并且大部分都有效。然而，它在我的页面上仍然失败。这可能是因为其他元素阻挡或将图像推开了吗？是的，这是因为其他元素。使用

z-index

我能够将灯箱置于所有其他元素之上。然而，它仍然被一些我无法确定的事情推向了正确的方向。如果现场演示不可见，我们怎么能看到问题呢？：）您当前的代码工作正常。包括您正在使用的其他代码。在本网站上运行此代码时，会显示此图像，该图像确实居中显示，并且大部分都有效。然而，它在我的页面上仍然失败。这可能是因为其他元素阻挡或将图像推开了吗？是的，这是因为其他元素。使用

z-index

我能够将灯箱置于所有其他元素之上。然而，它仍然被一些我无法确定的事情推向了正确的方向。如果现场演示不可见，我们怎么能看到问题呢？：）