IE7에서 절대 위치 요소가있는 Z- 인덱스 문제

Question

사용자의 현재 상태를 나타내는 커넥터 div가있는 텍스트 영역이 있습니다. connector-div는 텍스트 영역과 함께 사용자가 "말하는"것을 상징하는 말풍선을 형성 할 수 있도록 절대 위치에 있습니다. 커넥터는 텍스트 영역 (일반적으로 더 높은 Z- 인덱스)의 "상단"에 배치되어야하며 불행히도 지원해야하는 IE7이 아닌 모든 브라우저에서 제대로 작동합니다. IE7에서 connector-div는 텍스트 영역 아래에 위치하며 문제를 해결합니다.

IE7의 Z- 색인 버그로 문제를 봤는데 발견 한 여러 가지 해결책을 시도했지만 아무도 내 특별한 경우를 해결하지 못했습니다.

가 나는 다음과 같은 간단한 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> 

을" 이야기 - 거품 사업부는 상대적으로, 커넥터 - div는 z-index 4와 절대적이며, textarea는 상대적이며 현재는 어디에서나 작동하지만 z-index는 없으므로 ie7입니다. 하지만 texarea와 커넥터의 높이는 낮게 설정하려고했지만 IE7에는 wierd stacking이 있습니다.

Ive는 위치 지정, Z- 인덱싱, 요소 배치 등 다양한 솔루션을 시도했지만 아무 것도 작동하지 않습니다.

누구나 아이디어가 있으십니까?

문제에 연결된 일부 CSS : 그 어려운 당신은뿐만 아니라 부모 div의에 Z- 인덱스를 설정해야하지만 응답하도록 코드없이

.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) 
} 

Answer 1

, 그 공통의 문제는 내가 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>