порядок z-index для перетаскиваемого div - PullRequest
Новая
       25

порядок z-index для перетаскиваемого div

2 голосов
/ 20 сентября 2011

Я хочу создать перетаскиваемый медиаплеер (в моем примере это синяя рамка), и мне нужно поставить медиаплеер перед всеми элементами div. Как я могу это сделать?

Шаблон моей страницы такой:

Вы можете попробовать это: http://jsfiddle.net/krMhY/

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <title>Popup Test</title>


    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.ui.full.js" type="text/javascript"></script>

    <style type="text/css">
        .contents
        {position:fixed; bottom:0; left: 0; right:0; top:100px;}

        .resizableArea
        {position:absolute; bottom:0; top:0; width:100%;}

        .resizableArea .leftSection
        {position:relative; float:left; width: 150px; height:100%;}

        .resizableArea .splitter
        {position: absolute; left: 150px; width: 4px; height: 100%;}

        .resizableArea .rightSection
        {position: relative; overflow: auto; height: 100%;}    
    </style>
  </head>
  <body                               style="z-index: 1; background-color: purple;">
    <div class="contents"             style="z-index: 2; background-color: black;">
        <div class="resizableArea"    style="z-index: 3; background-color: aqua;">
            <div class="leftSection"  style="z-index: 4; background-color: yellow;">&nbsp;</div>
            <div class="splitter"     style="z-index: 7; background-color: green;">&nbsp;</div>
            <div class="rightSection" style="z-index: 6; background-color: red;">&nbsp;<br />
                <div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
            </div>
        </div>
    </div>

    <script language="javascript" type="text/javascript">
        $("#drag").draggable();
    </script>
  </body>
</html>

Спасибо всем ...

Ответы [ 6 ]

18 голосов
/ 20 сентября 2011

Если ни один из других элементов не имеет определенного z-index, то с помощью z-index: 1 будет хорошо.

Модель: Как определяется z-индекс? 

                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2

Сначала проходят прямые дочерние узлы тела.Встречаются два элемента: #A и #F.Им присваивается z-индекс 1 и 2. Этот шаг повторяется для каждого (дочернего) элемента в документе.

Затем проверяются установленные вручную свойства z-index.Если два z-index значения равны, их позиция в дереве документа сравнивается.

Ваш регистр: 

<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2

Вы ожидаете, что #Y будет перекрываться #Z, потому что z-index из 3 явно выше, чем 2. Ну, вы не правы: #Y является дочерним от #X, с z-index из 1. Два больше, чем один, и, таким образом, #Zбудет отображаться над #X (и #Y).

Эту концепцию можно легко визуализировать в этом плунжере: http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

3 голосов
/ 20 сентября 2011

Есть лучшее решение.Вы не можете установить переполнение: авто. 

.resizableArea .rightSection {
  position: relative;
  height: 100%;
  margin-left: 150px;
}
2 голосов
/ 20 сентября 2011

переход к следующему будет решен 

.resizableArea .rightSection
{ overflow: auto; height: 100%;} 

#drag
{position: absolute;}
1 голос
/ 20 сентября 2011 
<div class="contents"             style="z-index: 2; background-color: black;">
    <div class="resizableArea"    style="z-index: 3; background-color: aqua;">
        <div class="leftSection"  style="z-index: 4; background-color: yellow;">&nbsp;</div>
        <div class="splitter"     style="z-index: 7; background-color: green;">&nbsp;</div>
        <div class="rightSection" style="z-index: 6; background-color: red;">&nbsp;<br /></div>
    </div>
</div>
<div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
1 голос
/ 20 сентября 2011

Переполнение: auto для div .rightSection, это проблема.Перетаскиваемый объект не может (в этом случае) выйти из своего контейнера.

1 голос
/ 20 сентября 2011

Есть два варианта: взять элемент #drag за пределами другого div и присвоить ему более высокий индекс zIndex или установить переполнение на .rightSection на visible.

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...