내 전단지 위에 내 텍스트가 겹쳐져 보이지 않는 이유는 무엇입니까?

Question

이 질문은 내가 왼쪽에서 오른쪽으로 검은 색 투명 그라데이션 배경을 가지고 내 전단지지도의 왼쪽 위에 텍스트 오버레이를 추가하기 위해 노력하고있어 how to add a gradient over a leaflet map?

하기 전에 물어 보는 하나의 연속이다.

지도가 작동하지 않는 것처럼 보입니다. css로 흰색으로 설정된 내 텍스트를 수정하면지도가 작동하지 않는 것 같습니다. 누구든지지도 위에 내 텍스트가 나타나기 위해 내가해야 할 일을 말해 줄 수 있습니까? 감사!

<style> 

     #map-id { 
     height: 100%; 
     width: 100%; 
     position: absolute; 
     } 
     html,body{margin: 0; padding: 0} 

     #map-id:before { 
     position: absolute; 
     content: ''; 
     height: 100%; 
     width: 100%; 
     background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
     pointer-events: none; 
     z-index: 999; 
    } 
     #menu-text{ 
     display: inline-bloc;  
     } 

    #menu-text:before{ 
    position: absolute; 
     content: ''; 
     height: 100%; 
     width: 100%; 
     color: white; 
     pointer-events: none; 
     z-index: 999; 


    } 


</style> 
<div id="map-id"> 
    <script type="text/javascript" src="{% static "js/map.js" %}"></script> 

</div> 

<div id="menu-text"> 
    <h1> 
     This is the text that should be showing up, but isn't. 
    </h1> 
</div> 

흰색 텍스트가없는 검은 색면이 나타납니다.

Answer 1

귀하는 이미 지난 질문에 대한 답변에 예를 적용했습니다. http://codepen.io/hkadyanji/pen/bwNLKK

귀하의 코드 <script> 태그가 <div id="map-id">에 배치해서는 안, 고장

의