Проблема Z-индекса с абсолютным позиционированием элемента в IE7

У меня есть текстовая область с div соединителя, который представляет текущий статус пользователей. Коннектор-div имеет абсолютное позиционирование, так что вместе с текстовой областью он образует всплывающее окно, символизирующее то, что «говорит» пользователь. Соединитель должен быть размещен «поверх» текстовой области (обычно с более высоким z-индексом), и он отлично работает во всех браузерах, кроме IE7, который, к сожалению, мне приходится поддерживать. В IE7 коннектор-div размещается под текстовой областью, и в этом проблема.

Я погуглил проблему с ошибкой Z-index в IE7 и попробовал несколько решений, которые я нашел, но ни одно из них не решило ее для моего конкретного случая.

У меня есть следующий упрощенный html:

"

  <form class="current-status">
    <div class="talk-bubble">
      <div class="connector"> "Absolute positioned with high z-index.." </div>
      <textarea> "User status goes here" </textarea>
    </div>
  </form>

"

current-status-div имеет просто статическое позиционирование, talk-bubble-div является относительным, коннектор-div является абсолютным с z-индексом 4, textarea является относительным и в настоящее время не имеет z-индекса, поскольку он работает везде, кроме ie7. Но я попытался установить низкий z-индекс на texarea и высокий на коннекторе, но IE7 имеет странное стекирование.

Я пробовал множество различных решений с позиционированием, z-индексированием, обтеканием элементов и т. д., но, похоже, ничего не работает.

у кого-нибудь есть идея?

некоторые css, связанные с проблемой:

.content-box-plate {
    position: relative;
    z-index: auto;
}

.talk-bubble {
    position: relative;
    z-index: auto;
}

.connector {
    background: url("/images/portal/bubble_connector.png?1314369295") no-repeat scroll center center transparent;
    height: 12px;
    position: absolute;
    right: 5px;
    width: 21px;
    z-index: 4;
}
textarea {
    font-size: 13.5px;
    font-style: italic;
    height: 40px;
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 6px 6px 8px;
    position: relative;
    width: 165px;
    z-index: auto (tried to put a specific value lower than connectors without effect)
}

html css z-index positioning internet-explorer-7
person user954829    schedule 20.09.2011    source источник
comment
Где СС? Кажется странным задавать вопрос о CSS и не публиковать его.   -  person Kyle    schedule 20.09.2011
comment
Если вы ожидаете ответа, вы обязательно должны добавить свой CSS, а еще лучше сделать демонстрацию на JSFIDDLE.   -  person Gatekeeper    schedule 20.09.2011
comment
Укажите ссылку на свою страницу или jsFiddle/демонстрация JS Bin. Чтобы было ясно: мне нужна живая демонстрация, на которой я могу использовать инструменты разработчика IE.   -  person thirtydot    schedule 20.09.2011
comment
Хорошо, я добавлю css, связанный с этим завтра, я не думал, что все несвязанные css-правила, такие как поля, ширина и т. д., были необходимы, поэтому я попытался включить важные вещи, но я понял :)   -  person user954829    schedule 21.09.2011

Ответы (1)


arrow_upward
0
arrow_downward

Без вашего кода сложно ответить, однако вам нужно также установить z-индекс для родительских div, это обычная проблема, которую я исправляю в IE6/7, поскольку я также должен их поддерживать.

Возможно, вам не нужно подниматься до формы, но без вашего css и просмотра вживую трудно сказать - это или около того исправит это!

Вам нужна позиция, чтобы иметь действительный z-индекс, не беспокойтесь о других z-индексах на странице и т. д., поскольку это инкапсулировано в форме; конечно, измените значения на все, что хотите, но это порядок.

<form class="current-status" style="position:relative; z-index:1;">
    <div class="talk-bubble" style="position:relative; z-index:1;">
      <div class="connector" style="position:absolute; z-index:2"> "Absolute positioned with high z-index.." </div>
      <textarea style="position:relative; z-index:1"> "User status goes here" </textarea>
    </div>
</form>
person Stryder    schedule 20.09.2011
comment
изменил позиционирование и индексацию в соответствии с вашим предложением, и текстовая область по-прежнему находится поверх разъема в IE7, хотя работает везде (как и большинство решений). Придется попытаться найти способ обойти это .. в любом случае спасибо за предложение! - person user954829; 22.09.2011