CSS-оверлей и jQuery

Question

Это более или менее CSS вопрос, но я использую его с jQuery . Итак, в основном то, что у меня есть, это:

<div
  style="overflow: hidden; width: 1000px; height: 450px; background-color: rgb(0, 0, 0); position: relative;"
  id="wrapper">
    <div
      style="background-color: rgb(255, 255, 255); opacity: 0.9; top: 0pt; left: 0pt; width: 1000px; height: 450px; position: absolute; z-index: 500;"
      id="mask"></div>
    <div
      class="ui-draggable"
      style="margin: 60px auto auto; position: relative; width: 1550px; height: 340px;"
      id="test">
        <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row">
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
             ><img
                 style="width: 100px; height: 100px; position: relative;"
                 class="img"
                 src="/images/Chrysanthemum.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                 style="width: 100px; height: 100px; position: relative;"
                 class="img"
                 src="/images/Desert.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Hydrangeas.jpg"></div>
        </div>
        <div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row">
            <div
               style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Jellyfish.jpg"></div>
            <div
              style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Koala.jpg"></div>
            <div
               style="width: 100px; height: 100px; margin-top: 10px; position: relative;"
            ><img
                style="width: 100px; height: 100px; position: relative;"
                class="img"
                src="/images/Lighthouse.jpg"></div>
        </div>
    </div>
</div>
<div
   style="position: absolute; left: 978px; top: 223px; color: rgb(255, 255, 255);"
   id="next-btn">Next</div>
<div
   style="position: absolute; left: 8px; top: 223px; color: rgb(255, 255, 255);"
   id="prev-btn">Prev</div>

То, что я делаю с маской div, пытается заставить ее перекрывать всю оболочку. Поэтому я установил его ширину и высоту на высоту обертки. Это прекрасно работает в Firefox, Chrome и Safari.

Однако в Internet Explorer он не работает. Как я могу сделать это наложение?

Я пытался установить абсолютную позицию, которая работала нормально, кроме одной вещи. Есть что-то, что происходит поверх этой маски. Его положение относительно. Я установил один сверху z-index 1000 и маску 500. Однако, похоже, в Internet Explorer есть ошибка, которая автоматически делает абсолютный div выше всех.

Answer 1

однако кажется, что есть ошибка в том, что она автоматически делает абсолютный div выше всех.

Нет. Проблема в том, что Internet Explorer не поддерживает тег непрозрачности CSS3 . Вам нужно будет добавить следующий стиль в маску DIV, чтобы он работал и в IE:

filter: alpha(opacity=90);

Также прочитайте здесь и здесь для получения дополнительных советов о том, как правильно реализовать прозрачность.

В sidenote вы должны использовать встроенные стили реже. Это делает ваш код грязным и трудным для отладки.

Answer 2

Какая версия IE?во всяком случае, вы можете наложить свой абсолютный объект на другой абсолютный объект, а затем поместить в него относительное содержимое.