Приветствую. Сделал появляющийся при наведении текст, которому задал z-index 100 , но он всё равно выскакивает под другим блоком , хотя z index указал меньше. Помогите разобраться я еще новичок , возможно что то простое здесь , но я не пойму.


HTML Code:
  1. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
  2.     <!-- INTRO -->
  3. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro">
  4.     <[Ссылки могут видеть только зарегистрированные пользователи. ] class="container">
  5.         <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro_region"><[Ссылки могут видеть только зарегистрированные пользователи. ] class="info">Местоположение для доставки Вашего товара</[Ссылки могут видеть только зарегистрированные пользователи. ]>
  6.             <[Ссылки могут видеть только зарегистрированные пользователи. ] class="circle"><[Ссылки могут видеть только зарегистрированные пользователи. ] id="circle">&bull;</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]> 
  7.             <[Ссылки могут видеть только зарегистрированные пользователи. ] for="gor"><[Ссылки могут видеть только зарегистрированные пользователи. ] class="text_region">Ваш регион доставки:</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
  8.             <[Ссылки могут видеть только зарегистрированные пользователи. ] id="gor">
  9.                     <[Ссылки могут видеть только зарегистрированные пользователи. ] value="">г.</[Ссылки могут видеть только зарегистрированные пользователи. ]>
  10.                     <[Ссылки могут видеть только зарегистрированные пользователи. ] value="">г.</[Ссылки могут видеть только зарегистрированные пользователи. ]>
  11.                     <[Ссылки могут видеть только зарегистрированные пользователи. ] value="">г.</[Ссылки могут видеть только зарегистрированные пользователи. ]>
  12.                     <[Ссылки могут видеть только зарегистрированные пользователи. ] value="Россия">Россия</[Ссылки могут видеть только зарегистрированные пользователи. ]>
  13.             </[Ссылки могут видеть только зарегистрированные пользователи. ]>   
  14.         </[Ссылки могут видеть только зарегистрированные пользователи. ]>
  15.         <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro_dostavka">
  16.             <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro_dostavka_1">Текст1<[Ссылки могут видеть только зарегистрированные пользователи. ] class="info">Надо чтоб этот текст был поверх остального </[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
  17.             <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro_dostavka_2">Текст2<[Ссылки могут видеть только зарегистрированные пользователи. ] class="info">Надо чтоб этот текст был поверх остального </[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
  18.             <[Ссылки могут видеть только зарегистрированные пользователи. ] class="intro_dostavka_3">Текст3<[Ссылки могут видеть только зарегистрированные пользователи. ] class="info">Надо чтоб этот текст был поверх остального </[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
  19.         </[Ссылки могут видеть только зарегистрированные пользователи. ]>  
  20.     </[Ссылки могут видеть только зарегистрированные пользователи. ]> 
  21. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
  22. <!-- Zagolovk -->
  23.     <[Ссылки могут видеть только зарегистрированные пользователи. ] class="container_zagolovok">
  24.         <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] class="zagolovok">Этот текст перекрывает всплывающий блок</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
  25.     </[Ссылки могут видеть только зарегистрированные пользователи. ]>
  26. </[Ссылки могут видеть только зарегистрированные пользователи. ]>


CSS Code:
  1. body {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5.  
  6. /* intro */
  7. .intro {
  8.    background: #333;
  9.    width: 100%;
  10.    height: 40px;
  11. }
  12. .container {
  13.     display: flex;
  14.  
  15.     font-family: Calibri;
  16.     font-size: 14px;
  17.     word-spacing: 0.2em;
  18.     letter-spacing: 0.3px;
  19.     
  20.     width: 100%;
  21.     max-width: 1260px;
  22.     min-width: 700px;
  23.     margin: 0 auto;
  24.  
  25.     justify-content: space-between; 
  26.     
  27.     color: #fff;  
  28. }
  29. #circle {
  30.     -webkit-animation: circle 2s linear infinite;
  31.     animation: circle 2s linear infinite;
  32.   }
  33.   @-webkit-keyframes circle {
  34.     0% { color: rgba(224, 24, 24, 1); }
  35.     50% { color: rgba(224, 24, 24, 0); }
  36.     100% { color: rgba(224, 24, 24, 1); }
  37.   }
  38.   @keyframes circle {
  39.     0% { color: rgb(224, 24, 24, 1); }
  40.     50% { color: rgba(224, 24, 24, 0); }
  41.     100% { color: rgba(224, 24, 24, 1); }
  42.   }
  43.   #circle {
  44.      font-size: 35px;
  45.   }
  46.  .intro_region:hover .circle {
  47.      opacity: 0;
  48.    
  49.  }
  50.   .intro_region div {
  51.     height: 40px; 
  52.     margin-right: 2px;
  53.   }
  54. .intro_region {
  55.     line-height: 40px;
  56.     width: 300px;
  57.     display: flex;
  58.     text-align: center;
  59.  
  60. }
  61. .text_region:hover {
  62.     cursor: help; 
  63. }
  64. .intro_region:hover #gor {
  65.     background: #63C0E4;
  66.     cursor: help;
  67. }
  68. .intro_region:hover {
  69.     background: #63C0E4;
  70.     cursor: help;
  71. }
  72. .intro_dostavka .intro_dostavka_1:hover {
  73.     background: #63C0E4; 
  74.     cursor: help;
  75. }
  76. .intro_dostavka .intro_dostavka_2:hover {
  77.     background: #63C0E4; 
  78.     cursor: help;
  79. }
  80. .intro_dostavka .intro_dostavka_3:hover {
  81.     background: #63C0E4; 
  82.     cursor: help;
  83. }
  84. #gor {
  85.     border: none;
  86.     outline:none;
  87.     background: #333;
  88.     color: #fff;
  89.     margin-bottom: 2px;
  90. }
  91.  
  92.  
  93.  
  94.  
  95. .intro_dostavka {
  96.     display: flex;
  97.     position: relative;
  98.     z-index: 100;   
  99. }
  100. .intro_dostavka_1 {
  101.     background: #E3E306;
  102.     color: black;
  103.     position: relative;
  104.     z-index: 100;   
  105. }
  106. .intro_dostavka_2 {   
  107.     
  108. }
  109. .intro_dostavka div {
  110.     height: 40px;
  111.     width: 200px;
  112.     text-align: center;
  113.     line-height: 40px;
  114.     
  115. }
  116.  
  117.  
  118.  
  119.  
  120. .info {
  121.     top:43px;
  122.     display:none;
  123. }
  124.  
  125. .intro_dostavka_1:hover .info, 
  126. .intro_dostavka_2:hover .info, 
  127. .intro_dostavka_3:hover .info {
  128.     display: block;
  129.     position: absolute;
  130.     color: #333;
  131.     z-index: 100;
  132.     border: 1px solid grey;
  133.     height: 40px;
  134.     width: 169px;
  135.     line-height: 15px; 
  136.     text-align: left;
  137.     padding: 15px;
  138.     border-radius: 3px;
  139.     box-shadow: 1px 0px 1px rgba(88, 81, 81, 0.43), 1px 2px 3px 3px rgba(27, 25, 25, 0.32);
  140. }
  141.  
  142. .intro_region:hover .info {
  143.     display:block;
  144.     position:absolute;
  145.     color: #333;
  146.     z-index: 100;
  147.     border: 1px solid grey;
  148.     height: 40px;
  149.     width: 269px;
  150.     line-height: 15px; 
  151.     text-align: left;
  152.     padding: 15px;
  153.     border-radius: 3px;
  154.     box-shadow: 1px 0px 1px rgba(88, 81, 81, 0.43), 1px 2px 3px 3px rgba(27, 25, 25, 0.32);
  155. }
  156.  
  157. /* Zagolovok */
  158. .container_zagolovok {
  159.     display: flex;
  160.  
  161.     font-family: Calibri;
  162.  
  163.     letter-spacing: 0.3px;
  164.     
  165.     width: 100%;
  166.     max-width: 1260px;
  167.     min-width: 700px;
  168.     margin: 0 auto;
  169.     margin-top: 20px;
  170.     justify-content: center; 
  171.     
  172.     position: relative;
  173.     z-index: 0;
  174. }
  175.  
  176. .zagolovok {
  177.     position: relative;
  178.     z-index: 0;
  179.  
  180. color: black;
  181. font-size: 50px;
  182. font-weight: 900;
  183. }