오버플로 오버라이드 : Z- 인덱스로 숨김

coda_bubble jquery 플러그인을 사용하고 있으며 오버플로 숨겨진 div 내 버블 팝업을 만들 필요가 있습니다. 여기 내 샘플 코드입니다.오버플로 오버라이드 : Z- 인덱스로 숨김

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    width:120px; 
    height:80px; 
    overflow:hidden; 
    float:left; 
    } 
.coda_bubble{ 
    z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="overflow"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
    <div class="overflow" style="overflow: visible;"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

출처

2009-12-23 mukamaivan

.overflow.의 하위 항목이 필요하지 않다고 가정합니다. 그렇지 않다면 그것을 밖으로 이동하고 두 아이를 보유 위치 지정 div를 만듭니다.

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    overflow:hidden; 
    width:120px; 
    height:80px; 
    position:absolute; /*May not be needed.*/ 
    } 
.position { 
    width:120px; 
    height:80px; 
    float:left; 
} 
.coda_bubble{ 
    /*z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="position"> 
     <div class="overflow"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 

    <div class="position"> 
     <div class="overflow" style="overflow:"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

출처

2010-01-06 03:11:21 Byran

고맙다 Byran, 아이디어는 중대하다, 그것을 시도하게하십시오. – mukamaivan

z- 색인 속성은 위치가 절대로 설정된 요소에 적용됩니다. 이 CSS를 대신 사용해보십시오.

.coda_bubble{ 
    position:absolute; 
    z-index:100;/****NOT WORKING*******/ 
}

출처

2009-12-23 12:15:35 Sarfraz

Thanx Sharfraz하지만 여전히 거품이 숨겨져 있습니다. .overflow { 너비 : 120px; 신장 : 80px; 오버플로 : 숨김; float : left; \t 위치 : 상대적; } .coda_bubble { 위치 : 절대; z- 인덱스 : 100;/**** NOT WORKING *******/ } – mukamaivan

.overflow 클래스를 요소에서 제거하여 어떤 일이 발생하는지 확인합니다. – Sarfraz

그게 실제로 작동하지만 목적이 있기 때문에 거기에 필요합니다. – mukamaivan

수 없습니다. 오버플로 : 숨김; 요소 외부의 내용을 숨 깁니다. 기간.

z- 색인은 다른 누군가의 말에도 불구하고 절대적으로 상대적으로 배치 된 요소에 적용됩니다.

당신이 패딩으로 살 수있는 경우는, 특정 사업부에 약간의 패딩 정상을 넣을 수 편집, 즉. div도 약간 넓어야합니다.

편집 2 다른 사람이 말했듯이, position : relative; 및 위치 : 절대; 아마도 더 일반적 일 것입니다. 예, z-index는 위치와 함께 작동합니다 : 고정; 또한 position을 위해서가 아닙니다 : static; 나는 그것들을 간과했다.

출처

2010-01-12 18:17:47

z-index 재산 position 옵션 absolute 또는 relative로 설정된 요소 만 작동합니다.

즉, 항상은 z-index과 작동하려면 positon이 필요합니다.

출처

2011-02-08 18:39:51 Username

나는 창에서 오프셋 위치를 계산하여 부모로부터 제거하고 본문에 첨부합니다.

예 :

var left, top; 
left = jQuery(element).offset().left; 
top = jQuery(element).offset().top; 
jQuery(element) 
    .appendTo('body') 
    .css({ 
    'position': 'absolute', 
    'left': left + 'px', 
    'top': top + 'px' 
    });

출처

2011-04-07 14:08:46

그냥 수정 : z-index이 position: relative, position:absolute 및 position:fixed에 적용됩니다. 원래 질문에 대답하려면 - CSS에서 overflow: hidden 요소의 하위 항목을 부모 테두리 밖의 내용으로 표시하는 방법이 없으면 계층 구조를 변경해야합니다.

출처

2011-05-24 15:25:28 mystrdat

자녀들이 가계도 설정을 덮어 쓰게하는 것이 가능하다면, 그것은 훨씬 더 좋을 것입니다. 그런 다음 오버플로 숨겨진 div의 일부 자식 (예 : 내부의 요소 음영)을 볼 수 있지만 나머지는 그대로 유지됩니다. 이 제한은 말 그대로 개발자가 솔루션을 해킹으로 전환하도록합니다. –

HTML과 CSS의 계층 구조는 이러한 많은 반 패턴을 강제합니다. 복잡한 레이아웃을 최적의 방식으로 수행하는 것은 많은 경험을 필요로합니다. – mystrdat

오버플로 오버라이드 : Z- 인덱스로 숨김

답변

관련 문제