Переопределить переполнение: скрыто с z-index - PullRequest
Новая
       18

Переопределить переполнение: скрыто с z-index

10 голосов
/ 23 декабря 2009

Я использую плагин cqu_bubble jquery, и мне нужно, чтобы мой пузырь выскакивал в скрытом 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{
    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>

Ответы [ 6 ]

20 голосов
/ 07 апреля 2011

Я бы вычислил положение смещения из окна, удалил его из родительского элемента и прикрепил к телу.

Например: 

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'
  });
12 голосов
/ 12 января 2010

Вы не можете. переполнение: скрытое; Скрывает содержимое за пределами элемента. Период.

z-index применяется к абсолютным И относительно позиционированным элементам, просто по-разному, несмотря на то, что сказал кто-то еще.

EDIT Вы могли бы поместить некоторый верхний слой в этот конкретный div, если вы можете жить с этим отступом, то есть. Div тоже должен быть немного шире.

РЕДАКТИРОВАТЬ 2 Как утверждали другие, хотя положение: относительное; и положение: абсолютное; да, z-index работает с position: fixed; также, только не для положения: статический; Я упустил это из виду.

6 голосов
/ 24 мая 2011

Просто поправка: z-index относится к position: relative, position:absolute И position:fixed. Чтобы ответить на исходный вопрос - в CSS нет способа заставить дочерний элемент элемента overflow: hidden показывать его содержимое за пределами родительских границ, необходимо изменить иерархию.

2 голосов
/ 06 января 2010

Полагаю, вам не нужен .coda_bubble, чтобы быть потомком .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>
0 голосов
/ 08 февраля 2011

Свойство z-index ONLY работает в элементах, для которых для параметра position установлено значение absolute или relative.

Другими словами, вам ВСЕГДА необходимо positon для работы с z-index.

0 голосов
/ 23 декабря 2009

Свойство z-index применяется к тем элементам, у которых позиция установлена ​​в абсолютное значение. Попробуйте эту CSS вместо: 

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