在wordpress中将元素发送到背景

Question

如果您尝试在未登录的情况下对我的产品发表评论，则会出现一个容器供您登录。 问题是相关产品的容器也会出现在该屏幕上，有时会覆盖登录表单。

要测试它，请输入此 URL 并尝试发表评论，您无需编写任何内容： https://vaporlibre.com/producto/neon-lime-ivg/

我用过这些代码sn-ps没有成功：

<script type="text/javascript">   
jQuery(document).ready(function($) {
$("p.wc-product-reviews-pro-form-submit-row button").click(function(){
$( '.product_image_wrapper').css("position","static !important");
});
$(":button.woocommerce-form-login__submit").click(function(){
$( '.et_pb_column').css("position","relative");
});
});
</script>

.et_pb_column {

    position: static !important;
}

$("p.wc-product-reviews-pro-form-submit-row button").click(function(){

                $( '.product_image_wrapper').css("position","static !important");

            });




            $(":button.woocommerce-form-login__submit").click(function(){

                $( '.et_pb_column').css("position","relative");

            });

我还留了一张照片，以便更容易看到：

(https://subefotos.com/ver/?505a48dba89f4acd38638dad0dcb414fo.png )

Answer 1

您只需将1 中的z-index 设置为包含相关产品的行。

您可以在样式表中输入以下内容：

<style type="text/css">
  .et_pb_row_3_tb_body {
    z-index: 1 !important;
  }
</style>

或者如果您需要使用 JavaScript 进行配置：

<script type="text/javascript">
  $(function() {
    $('.et_pb_row_3_tb_body').css('z-index', 1);
  });
</script>

我还建议给这个div 一个id，这样更容易定位它。