将 div 直接覆盖在兄弟 div 之上
Posted
技术标签:
【中文标题】将 div 直接覆盖在兄弟 div 之上【英文标题】:Overlay a div directly on top of a sibling div 【发布时间】:2016-02-18 03:43:08 【问题描述】:我正在使用 Wordpress,并为 WooCommerce 安装了一个插件,该插件为产品图片创建了一个缩放窗口。但是,我无法让缩放窗口出现在原始产品图像的顶部。代码如下所示:
<div class="yith_magnifier_zoom_wrap">
<a class="yith_magnifier_zoom woocommerce-main-image" title="orange-slices" itemprop="image" href="orange-slices.jpg">
<img class="attachment-shop_single wp-post-image" src="orange-slices.jpg">
</a>
<div class="yith_magnifier_mousetrap" style="width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer;"></div>
<div class="yith_magnifier_zoom_magnifier" style="left: 0px; top: 0px; width: 300px; height: 300px; background-repeat: no-repeat; background-image: url('orange-slices.jpg'); display: block; background-position: -7px -7px;"></div>
您可以在此处查看问题:WooCommerce product page
我正在尝试将缩放窗口 div .yith_magnifier_zoom_magnifier
居中对齐到图像 div .yith_magnifier_mousetrap
的顶部。我通过将其设为relative
并使用margin:0 auto;
设法使其居中,但它现在直接显示在产品图片下方。
不幸的是,主题和插件应用了各种内联规则,所以我需要覆盖它,但我还需要保持解决方案的响应性,因为产品图像高度可能会有所不同。任何建议都会非常受欢迎。谢谢。
【问题讨论】:
这里需要重现 html 和 CSS。我要指出的是,您正在尝试将几个<div>
元素包装在 <a>
元素中。可能不会有任何好处。把你的 HTML 搞清楚,然后看看 CSS 中的相对位置和绝对位置。
谢谢。添加,虽然由于是从主题和插件派生的,所以相当混乱。我认为<a>
元素是<div>'s
的兄弟?
【参考方案1】:
通过这种方式,您不需要任何幻数(例如 CSS 中的特定像素大小):
.yith_magnifier_zoom_magnifier
position: absolute !important;
margin: 0 auto !important;
left: 0;
right: 0;
【讨论】:
这似乎也有效。再次,非常感谢。我将其设置为可接受的答案,因为它的代码更轻且更少。再次感谢 kaosmos :) 不客气@SamCampsall,我想强调这段代码的主要好处是它不需要知道你正在使用的图像的大小。【参考方案2】:.yith_magnifier_mousetrap
top:-366px!important;
我认为这就是你想要达到的目标?
编辑
.yith_magnifier_zoom_magnifier
position: absolute !important;
margin: 0 auto !important;
height: 100%!important;
top: inherit!important;
bottom: 100%;
left: 50%!important;
margin-left: -150px!important;
【讨论】:
感谢克雷格,但不幸的是图像高度可能会有所不同,所以我需要一个响应式解决方案。还是谢谢你:) 我所做的编辑使缩放元素水平居中,同时适应任何图像高度。只要图像总是我们 300px 宽 是的,它总是 300 像素,是的,这行得通!我只能模糊地解析它,但你在 5 分钟内就知道了我两个小时以来一直盯着的东西。非常感谢克雷格! :)以上是关于将 div 直接覆盖在兄弟 div 之上的主要内容,如果未能解决你的问题,请参考以下文章