override overflow: hidden with z-index

Đang sử dụng plugin jquery coda_bubble, và tôi cần phải làm cho bong bóng của tôi bật ra trong một div ẩn bị tràn. đây là mã mẫu của tôi.override overflow: hidden with z-index

<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>

Nguồn

2009-12-23 mukamaivan

Tôi giả sử bạn không cần .coda_bubble là con của .overflow. Nếu không thì hãy di chuyển nó ra và tạo một div định vị để giữ cả hai con.

<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>

Nguồn

2010-01-06 03:11:21 Byran

Thanx Byran, ý tưởng tuyệt vời, hãy để tôi thử nó. – mukamaivan

Thuộc tính z-index áp dụng cho các thành phần có vị trí được đặt thành tuyệt đối. Hãy thử css này thay thế:

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

Nguồn

2009-12-23 12:15:35 Sarfraz

Thanx Sharfraz, nhưng vẫn bong bóng bị ẩn. .overflow { chiều rộng: 120px; chiều cao: 80px; tràn: bị ẩn; float: left; \t vị trí: tương đối; } .coda_bubble { vị trí: tuyệt đối; z-index: 100;/**** NOT WORKING *******/ } – mukamaivan

xóa lớp .overflow khỏi phần tử để kiểm tra điều gì xảy ra. – Sarfraz

Điều đó thực sự hiệu quả nhưng nó có một mục đích, vì vậy tôi cần nó ở đó. – mukamaivan

Bạn không thể. tràn: bị ẩn; Ẩn nội dung bên ngoài phần tử. Giai đoạn.

z-index áp dụng cho các yếu tố tuyệt đối và tương đối vị trí, chỉ khác nhau, bất chấp những gì người khác nói.

CHỈNH SỬA Bạn có thể đặt một số đệm trên đó div cụ thể, nếu bạn có thể sống với đệm đó, đó là. Div cũng sẽ cần rộng hơn một chút.

CHỈNH SỬA 2 Như những người khác đã nêu, mặc dù vị trí: tương đối; và vị trí: tuyệt đối; có lẽ phổ biến hơn, vâng, z-index hoạt động với vị trí: cố định; cũng không chỉ cho vị trí: tĩnh; Tôi đã bỏ qua chúng.

Nguồn

2010-01-12 18:17:47

Thuộc tính z-indexCHỈ làm việc trong các yếu tố có position tùy chọn thiết lập để absolute hay relative.

Nói cách khác, bạn ALWAYS cần positon để làm việc với z-index.

Nguồn

2011-02-08 18:39:51 Username

Tôi sẽ tính vị trí bù trừ từ cửa sổ, xóa vị trí khỏi bố cục và đính kèm nó vào phần thân.

Ví dụ:

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' 
    });

Nguồn

2011-04-07 14:08:46

Chỉ cần một sự điều chỉnh: z-index áp dụng cho position: relative, position:absolute VÀ position:fixed. Để trả lời câu hỏi gốc - không có cách nào trong CSS để tạo thành phần tử con của phần tử overflow: hidden hiển thị nội dung bên ngoài đường viền gốc, bạn phải thay đổi thứ bậc.

Nguồn

2011-05-24 15:25:28 mystrdat

Sẽ tốt hơn nếu có thể để các em ghi đè lên một số cài đặt của tổ phụ, chỉ cho bản thân. Sau đó, một số trẻ em của một div tràn ẩn có thể được nhìn thấy (chẳng hạn như sắc thái của các yếu tố bên trong nó), nhưng phần còn lại sẽ vẫn như cũ. Hạn chế này theo nghĩa đen buộc các nhà phát triển biến giải pháp của họ thành một bản hack. –

Hệ thống phân cấp của HTML và CSS buộc nhiều người trong số các antipattern này, phải mất rất nhiều kinh nghiệm để thực hiện các bố cục phức tạp một cách tối ưu. – mystrdat

override overflow: hidden with z-index

Trả lời

Các vấn đề liên quan