익스 z-index 버그... ㅠ.ㅠ > 그누4 질문답변

익스 z-index 버그... ㅠ.ㅠ 정보

익스 z-index 버그... ㅠ.ㅠ

첨부파일

zindex-test.html (1.0K) 18회 다운로드 2013-11-25 16:42:29

본문

아랫쪽에 OPEN 이라는 버튼을 누르면 노란박스 위로 회색레이어가 덮어씌워지고

그 위로 녹색 박스가 나와야 하는게 정상인데..

요걸 크롬이나 파폭에서 보면 정상작동 되지만 익스에서는 별짓을 다해도 안되네요 ㅜ.ㅜ

일단 문제가 container 부분에 relative 가 들어가기 때문에 익스에서는 z-index 를 0으로 인식해서 그런거라는데
(relative 는 변경 불가)

해결방법이 상위레이어에 z-index 를 주면 된다고해서 container 와 content 부분에 z-index를 주게되면

회색레이어 아랫쪽으로 가려져야할 노랭이까지 회색레이어 위로 나와버리고... ㅠ.ㅠ

꼭 해결해야 할 문제인데 방법이 없네요...

노랑색 > 회색레이어 > 녹색박스 요렇게 나와야 하는데

DTD 선언을 하지 않고 해결 할 수 있는 방법이 없을까요?

복사
공유하기

댓글 전체

차가운바람 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.11.25 16:55:00

각각 레이어에 z-index값을 줘 보세요

그런데 구글에서 검색하시면 관련된 소스가 엄청많아요~ 어느정도 검증된소스이니
가져다 쓰시는게 더 편할꺼에요

미운오리스키 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.11.25 22:02:29

그 방식도 써봤는데 position:relative 가 들어가야 하는 상황이라 잘 안되더라구요 ㅠㅠ

뽁스 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

13.11.26 18:14:19

container 랑 content 에 내용이 들어가는건가요?
글자라든지 이미지라든지..

안들어가면 꼼수로 가능할 듯 한데요~ㅎㅎ

#container 에 z-index:10 추가하시고

아래 jquery 에서

$(function(){

$('.open').click(function(){
$('#mask, #popup').show();
$('#content').css('background-color','#777777')
});

$('#mask, #popup').click(function(){
$('#mask, #popup').hide();
$('#content').css('background-color','#ff0')
});

});

백그라운드 색깔을 바꿔버리면...;;;

미운오리스키 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.11.28 17:38:20

에공 정신이 없어서 이제야 확인했네요
jquery 를 사용하면 안되고 css로 해야해서요 ㅠ.ㅠ
관심가져주셔서 감사합니당 (_ _)

새벽비 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

13.12.02 15:51:44

팝업 위치는 정해져 있는건가요?
아래처럼 하면 팝업 위치가 문제긴 한데 어떨런지요?


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
#mask { display:none; position:absolute; width:100%; height:100%; top:0; left:0; background-color:#777; z-index:1; }
#container { position:relative; width:500px; height:500px; margin-top:100px; border:1px solid red; }/*position:relative; 가 없으면 정상작동됨*/
#content { width:100%; height:100%; background-color:#ff0; }
#popup { display:none; position:absolute; width:600px; height:300px; margin-top:100px;background-color:green;}
.open { border:1px solid #ccc; padding:10px; }

</style>

<div id="mask"><div id="popup"></div></div>

<div id="container">
<div id="content">

</div>
</div>

<span class="open">[OPEN]</span>

<script type="text/javascript">

$(function(){

$('.open').click(function(){
$('#mask, #popup').show();
});

$('#mask, #popup').click(function(){
$('#mask, #popup').hide();
});

});

</script>

팝업 위치는 정해져 있는건가요?
아래처럼 하면 팝업 위치가 문제긴 한데 어떨런지요?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</style>

$(function(){

$('.open').click(function(){
		$('#mask, #popup').show();
	});

$('#mask, #popup').click(function(){
		$('#mask, #popup').hide();
	});

});

</script>

그누4 질문답변

첨부파일

본문

공유하기

댓글 전체