黑色div框未覆盖内容

Question

#bf20_product_box {width:100%;
              height:auto;
              background-color:#262626;
              display:inline-block;}
             
#bf20black_opacity {width:100%;
                    height:auto;
                    z-index:998;
                    background-color:rgba(0, 0, 0, .5);}         
             
#bf20_ptitle {text-align:center;
                padding-top:90px;}

#bf20_ptitle > p:nth-child(1) {color:#f6cf4a;
                                 font-weight:bold;
                                 font-size:48px;}
#bf20_ptitle > p:nth-child(2) {color:white;
                                 font-size:35px;
                                 padding-top:10px;
                                 font-weight:bold;
                                 display:inline-block;
                                 text-decoration:underline;}    
        
#bf20_ptitle > p:nth-child(3) {color:white;
                                 font-size:35px;
                                 padding-top:10px;
                                 font-weight:bold;
                                 display:inline-block;} 
        
#bf20_product_box > table {width:60%;
                       text-align:center;
                       margin-top:90px;
                       margin-bottom:100px;
                       color:white;}
                       
.bf20_beforeevent {font-weight:bold;
                    font-size:20px;
                    margin-bottom:35px;
                    color:white;}
                    
#bf20_eventcaution { display:block;
           margin:0 auto;
           width:50%;
           height:auto;}    

#bf20_eventcaution > p {text-align:left;
                   font-weight:bold;
                   line-height:2;
                   margin-bottom:70px;
                   color:white;}    

<div id="bf20black_opacity">
    <div id="bf20_product_box">
    
    
        <div id="bf20_ptitle">
            <p>26일 단하루 선착순 타임특가</p>
            <p>2시간마다</p><p>&nbsp;온라인 전용 파격 혜택!</p>
        </div>
        
        <div id="bf20timesale_div" class="be20timesale_box">
        <table>
            <tr>    
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_14.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_19.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_15.jpg"></td>
            </tr>
            <tr>    
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_16.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_17.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_18.jpg"></td>
            </tr>
        </table>
        </div>
        
        <div class="bf20_beforeevent">
            <p>이벤트 주의사항 꼭 확인하세요</p>
        </div>
        
        <div id="bf20_eventcaution">
            <p>
            ㆍ 본 쿠폰은 회원 전용 이벤트이며, 오프라인 전용 쿠폰은 지정된 오프라인 매장에서만 사용 가능합니다.<br/>
            ㆍ 결제 시 내 쿠폰내역에 있는 쿠폰을 카운터에 제시해 주세요. (사용 가능한 매장 : 가로수길점, 홍대점, 명동 스테이지)<br/>
            ㆍ 오프라인 50% 쿠폰은 행사기간 2020.11.23 ~ 2020.12.31 매장 영업시간까지 사용 가능합니다.<br/>
            ㆍ 본 쿠폰은 ID 당 1회 구매 및 사용이 가능하며 비회원은 쿠폰 구매가 불가합니다.<br/>
            ㆍ 오프라인 전용 쿠폰 구매 시 순차적으로 쿠폰이 지급됩니다. (최대 3일)<br/>
            ㆍ 지급된 쿠폰은 마이페이지 내 쿠폰 내역에서 확인하실 수 있습니다.<br/>
            ㆍ 본 행사는 당사의 사정으로 예고 없이 변경, 조기종료될 수 있습니다.  
            </p>
        </div>
        
    </div>
    </div>

我想让“＃bf20black_opacity” div覆盖整个内容 因此，结果看起来像是img下面的弹出背景。

所以我必须将“＃bf20black_opacity” div框放置在所有div框的前面。 但它不起作用... 我必须修复的地方？ 我尝试修复它以添加位置：绝对和相对，但不起作用，它仅覆盖“＃bf20_product_box”

任何帮助将不胜感激！

谢谢！

Answer 1

因为这是您的背景。 如果要将其放置在其他元素的前面，则需要移动它的close标签并为其指定固定高度（而非自动）。

#bf20_product_box {width:100%;
              height:auto;
              background-color:#262626;
              display:inline-block;}
             
#bf20black_opacity {width:100%;
                    height:auto;
  height: 100vh;
                    z-index:998;
                    background-color:rgba(0, 0, 0, .5);}         
             
#bf20_ptitle {text-align:center;
                padding-top:90px;}

#bf20_ptitle > p:nth-child(1) {color:#f6cf4a;
                                 font-weight:bold;
                                 font-size:48px;}
#bf20_ptitle > p:nth-child(2) {color:white;
                                 font-size:35px;
                                 padding-top:10px;
                                 font-weight:bold;
                                 display:inline-block;
                                 text-decoration:underline;}    
        
#bf20_ptitle > p:nth-child(3) {color:white;
                                 font-size:35px;
                                 padding-top:10px;
                                 font-weight:bold;
                                 display:inline-block;} 
        
#bf20_product_box > table {width:60%;
                       text-align:center;
                       margin-top:90px;
                       margin-bottom:100px;
                       color:white;}
                       
.bf20_beforeevent {font-weight:bold;
                    font-size:20px;
                    margin-bottom:35px;
                    color:white;}
                    
#bf20_eventcaution { display:block;
           margin:0 auto;
           width:50%;
           height:auto;}    

#bf20_eventcaution > p {text-align:left;
                   font-weight:bold;
                   line-height:2;
                   margin-bottom:70px;
                   color:white;}    

<div id="bf20black_opacity">
  
    </div> /* here */
    <div id="bf20_product_box">
    
    
        <div id="bf20_ptitle">
            <p>26일 단하루 선착순 타임특가</p>
            <p>2시간마다</p><p>&nbsp;온라인 전용 파격 혜택!</p>
        </div>
        
        <div id="bf20timesale_div" class="be20timesale_box">
        <table>
            <tr>    
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_14.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_19.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_15.jpg"></td>
            </tr>
            <tr>    
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_16.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_17.jpg"></td>
                <td><img src="http://sappun.img13.kr/outsidemall/globalsite/promotion/kr/201110/test4_18.jpg"></td>
            </tr>
        </table>
        </div>
        
        <div class="bf20_beforeevent">
            <p>이벤트 주의사항 꼭 확인하세요</p>
        </div>
        
        <div id="bf20_eventcaution">
            <p>
            ㆍ 본 쿠폰은 회원 전용 이벤트이며, 오프라인 전용 쿠폰은 지정된 오프라인 매장에서만 사용 가능합니다.<br/>
            ㆍ 결제 시 내 쿠폰내역에 있는 쿠폰을 카운터에 제시해 주세요. (사용 가능한 매장 : 가로수길점, 홍대점, 명동 스테이지)<br/>
            ㆍ 오프라인 50% 쿠폰은 행사기간 2020.11.23 ~ 2020.12.31 매장 영업시간까지 사용 가능합니다.<br/>
            ㆍ 본 쿠폰은 ID 당 1회 구매 및 사용이 가능하며 비회원은 쿠폰 구매가 불가합니다.<br/>
            ㆍ 오프라인 전용 쿠폰 구매 시 순차적으로 쿠폰이 지급됩니다. (최대 3일)<br/>
            ㆍ 지급된 쿠폰은 마이페이지 내 쿠폰 내역에서 확인하실 수 있습니다.<br/>
            ㆍ 본 행사는 당사의 사정으로 예고 없이 변경, 조기종료될 수 있습니다.  
            </p>
        </div>
        
    </div>