Почему мой текст не накладывается на мою карточку с лифтом?

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">