Question

我想在我的网站上为我的用户创建教程功能。我计划在整个屏幕上创建一个黑色覆盖图层，在特定区域，背景是完全透明的，因此用户可以理解教程所讨论的区域。

这就是我所做的：

<body>
  <div>
    <p>THIS IS CONTENT</p>
  </div>

  <div class="overlay">
    <div></div>
  </div>
</body>

CSS上的

：

.overlay {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.overlay > div {
  background: rgba(0, 0, 0, 0);
  width: 100%;
  position: absolute;

  height: 30px;
  top:0;
  left: 0;
}

由于div的背景位于.overlay

的顶部，因此div内的.overlay无效

有人可以帮忙吗？或者，任何人都有更好的解决方案？

先谢谢。

Answer 1

我认为阻止您的内容div显示在叠加层下方的是您没有为此指定z-index。如果您为较大的容器div指定一个，请<div id="cont">并将其设置为小于覆盖的z-index（＆lt; 9999），也许您的问题将得到解决。

更新：我已经再次阅读了您的问题，为了解决您的实际问题，您应该在主div容器中制作特定内容和背景overlay。将position: absolute;添加到叠加层的内容div中似乎也很重要。

更新2：要在叠加显示时让#cont保持可见，只需为z-index添加div，而不是overlay使用的position: absolute;，并为其添加#cont { position: absolute; z-index: 9999; color: blue; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9990; } #overlay-cont { color: red; position: absolute; top :40px; left: 50px; z-index: 9990; display: block; } #overlay-bg { background: rgba(0, 0, 0, 0.5); height: 100%; Width: 100%; position: fixed; top: 0px; left: 0px; z-index: 9980; }以使其具体化。

以下是一个工作片段。

<body>
  <div id="cont">
    <p>THIS IS CONTENT</p>
  </div>

  <div class="overlay">
    <div id="overlay-cont">The overlay content goes here.</div>
    <div id="overlay-bg"></div>
  </div>
</body>

    $(".BILLING SUBMIT BUTTON CLASS").click(function(e){
     $(document).ajaxComplete(function(){
            inputss =  $(".woocommerce-invalid input");
            jQuery('.form-row').removeClass('field--error');
            jQuery('.form-row p.field__message').remove();

            $.each(inputss, function(xn, it){

                var fieldName= jQuery(it).attr('name');
                //console.log(fieldName);
                switch(fieldName) {
                    case 'billing_email':
                       jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-email">Please enter a valid email address</p>');
                    break;
                    case 'billing_first_name':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-first_name">Please enter your first name</p>');
                    break;
                    case 'billing_last_name':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-last_name">Please enter your last name</p>');
                    break;
                     case 'billing_address_1':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-address1">Please enter your address</p>');
                    break;
                     case 'billing_city':
                        jQuery(it).parent().addClass('field--error').append('<p class="field__message field__message--error" id="error-for-city">Please enter your city</p>');
                    break;

                    default:
                        //code block
                }


            });
        });

 }

在网站中创建教程覆盖

1 个答案: