Свойства zIndex и отображения не работают

Я относительно новичок в CSS, но добился больших успехов. Я в затруднении для этого, хотя и не могу найти ответ при поиске. Мой небольшой сайт работает как в Chrome, но не в IE. У меня есть div, в котором я устанавливаю zIndex равным -1, чтобы он исчез. Когда нажимается кнопка, я устанавливаю ее на 100, чтобы вытащить ее назад. В Chrome это работает как шарм. В IE вместо того, чтобы показывать div, он заполняет страницу и просто показывает «100» в верхней части страницы. Если я пытаюсь использовать display вместо zIndex, IE просто печатает все, что я установил для отображаемого значения, и стирает страницу.Свойства zIndex и отображения не работают

<!DOCTYPE html> 
<html"> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>My Page</title> 
    </head> 
    <body style="height:99%; width:99.8%;" onLoad="init();"> 
     <input type="file" id="files" name="files[]" style="visibility: hidden; position: absolute; top: -50; left: -50" /> 
     <div id="topbuttons" style="visibility: hidden;"> 
      <a href="javascript:document.getElementById('optionspanel').style.zIndex=100" class="bluebuttons" id="btnShowOptions">Show Options</a> 
     </div> 
     <div id="map-canvas" style="float:left; width: 75%; height: 95%;"></div> 
     <div id="optionspanel" style="position:absolute; top: 50px; left: 50px; background-color: white; border: 1px solid black; box-shadow: 5px 5px gray"> 
      panel stuff 
     </div> 
     <div id="rightpanel" style="float:right; width: 25%;"> 
      <div id="sidecelltop"></div> 
      <div id="sidecell" style="text-align: center"> 
       <select id="radiuslist" name="radiuslist" multiple style="visibility: hidden"></select> 
      </div> 
     </div> 
     </table> 
    </body> 
</html>

Когда кнопка нажата, то ZIndex из optionspanel установлен в -1 и отображается на карте Google, наряду с отображением кнопки опций в верхней части экрана. Когда нажата кнопка «Параметры», она должна установить значение zIndex для панели параметров равным 100. Но в IE она показывает «100» в верхней части окна, а все остальное исчезает. = (

Что я делаю неправильно?

Заранее спасибо за вашу помощь!

источник

2014-02-05 insane4

Можете ли вы создать JSFiddle, который показывает, что это происходит на самом деле? Sidenote: у вас, похоже, есть избыточный тег '' – davidpauljunior

Не устанавливайте Z-индекс -1. Это лучше, чтобы установить этот элемент для отображения: нет.Кроме того, у вас было много сумасшедших вещей, происходящих в вашем коде.Я немного почистил его.Это должно понравиться это лучше, без дополнительного синтаксиса у вас было.Это должно быть лучшей отправной точкой для получения функциональности вы хотите.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>My Page</title> 
     <style> 
      body{ 
       width: 100%; 
      } 
      #files{ 
       visibility: hidden; 
       position: absolute; 
       top: -50; 
       left: -50; 
      } 
      #radiuslist{ 
       visibility: hidden; 
      } 
      #optionspanel{ 
       position:absolute; 
       top: 50px; 
       left: 50px; 
       background-color: white; 
       border: 1px solid black; 
       box-shadow: 5px 5px gray; 
       display: none; 
      } 
      #map-canvas{ 
       float:left; 
       width: 75%; 
       height: 95%; 
      } 
      #rightpanel{ 
       float:right; 
       width: 25%; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="file" id="files" name="files[]"/> 
     <div id="topbuttons"> 
      <span id="showOptions" class="bluebuttons">Show Options</span> 
     </div> 
     <div id="map-canvas"></div> 
     <div id="optionspanel"> 
      panel stuff 
     </div> 
     <div id="rightpanel"> 
      <div id="sidecelltop"></div> 
      <div id="sidecell" style="text-align: center"> 
       <select id="radiuslist" name="radiuslist" multiple></select> 
      </div> 
     </div> 
    </body> 
    <script> 
     var show = document.getElementById('showOptions'); 
     show.onclick = function(){ 
      document.getElementById('optionspanel').style.display = 'block'; 
     }; 
    </script> 
</html>

источник

2014-02-05 04:53:37

Свойства zIndex и отображения не работают

ответ

Смежные вопросы