Z-индекс не работает внутри таблицы, если в контейнере есть переполнение прокрутки - PullRequest
Новая
       23

Z-индекс не работает внутри таблицы, если в контейнере есть переполнение прокрутки

12 голосов
/ 21 апреля 2011

У меня проблема с позиционированием абсолютного div вне таблицы, я не большой поклонник макета таблицы, но я нашел существующий проект с макетом таблицы.Код выглядит следующим образом: 

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

Где [--C--comp--C--] является строкой замены для fckEditor, который содержит изображение внутри div, я установил для z-index этого div значение 10, но он не хочетвыйти из таблицы .. и его положение абсолютное.

Пожалуйста, дайте мне знать, что я могу делать неправильно.

Я понял, что проблема связана с переполнением-прокруткой на контейнере td, если вы удалите overflow-y:scroll, он работаетхорошо, но проблема в том, что мне нужно это переполнение, так как внутри этого тд много контента.Я не знаю, что делать сейчас.:( .. кто-то, пожалуйста, помогите брату!

enter image description here

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

Ответы [ 2 ]

42 голосов
/ 21 апреля 2011

Для правильной работы z-index у каждого элемента, имеющего свойство z-index, также должна быть установлена ​​любая позиция (например, позиция: относительная).Кроме того, я бы назначил для таблицы позицию и z-индекс для сравнения.

1 голос
/ 21 апреля 2011

Говоря о том, что вы хотите, чтобы абсолютно позиционированный элемент «выходил из таблицы», подразумеваете ли вы, что вы хотите, чтобы он располагался вне таблицы, а не в зависимости от местоположения таблицы?Или вы хотите, чтобы он располагался внутри таблицы, но не был обрезан по границам таблицы или перекрывался с другим контентом?

Если это первое, я бы предложил переместить абсолютно позиционированный DIV в другое место кода.,Зачем класть его в стол, если он там не будет показан?Это только усложняет работу с контекстом стека и свойствами переполнения.

Если это последнее, вы можете настроить или удалить свойства overflow-x и overflow-y для div, который содержит ваш абсолютно позиционированный элемент,Вполне возможно, что браузер по-прежнему будет применять правила обрезки переполнения к дочерним элементам, даже если они абсолютно позиционированы.

Кроме того, имейте в виду, что z-index предназначен только для того, чтобы влиять на порядок наложения брат элементов.Элементы, находящиеся на одном уровне дерева, другими словами, другие элементы внутри вашего div-элемента высотой 500px, будут сложены в соответствии с их z-порядком, но родительские и дочерние узлы воспроизводятся по другим правилам.

Еслиэтот ответ не помогает, тогда, возможно, я неправильно понимаю, что вы хотите сделать.Можете ли вы опубликовать картинку о том, как она себя ведет, и описать, как бы вы хотели, чтобы она себя вел?

Изменить в ответ на опубликованную картинку:

Я думаю, что выхочу сделать в этом случае, чтобы получить небольшую карту вне прокрутки DIV как-то.Можете ли вы изменить это ... 

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--comp--C--]
</div>

... на что-то подобное? 

[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--compBigMap--C--] <!-- Big map code goes here -->
</div>

Если нет, можете ли вы изменить вставляемый код так, чтобы он создавал маленькийкарта на более высоком уровне в коде?Например, вы можете добавить элементы в корневой узел, используя document.getElementsByTagName("body")[0].appendChild(element); (может быть, лучший способ, просто пример).Используя это, или что-то в этом роде, вы можете поднять свою маленькую карту выше в дереве документов, что предотвратит ее отсечение.

...