Положение относительных перекрытий float-left

Question

Для внутреннего решения исключительно CMS я хотел, чтобы пользователь мог переключать любой элемент CMS на float: оставленный специально.Однако я должен был найти, что, поскольку все мои элементы контейнера также используют относительное позиционирование, любой элемент, который помещается рядом с плавающим, будет перекрывать этот элемент (только как блок, а не по содержимому) и, таким образом, лишать пользователя возможности использоватьлюбой из других элементов управления.

<div id="container1" class="elContainer" style="float: left;"></div>
<div id="container2" class="elContainer" style=""></div>

.elContainer {
   position: relative;
}

Вы можете попробовать эту установку jsFiddle, чтобы проверить проблему: http://jsfiddle.net/PNktA/ Если вы удалите float из первого внешнего контейнера, вы сможете нажать кнопку редактирования.Если вы держите поплавок, вы не можете щелкнуть по нему.

Я пытался найти решение, которое работает здесь, но мне не удалось это сделать.Кто-нибудь знает, как я могу это исправить?

Все в порядке, если решение работает только в FF и Safari, поскольку я могу требовать использования этих браузеров для моего бэкэнда.

Спасибо за любую помощь!

Answer 1

Brighty уже предоставил решение, но, возможно, я мог бы объяснить, почему на самом деле происходит "проблема".

Насколько я понял, это связано с пунктом 1и из-за точки 2:

1. Расположенные элементы размещены над плавающими не позиционированными родными братьями.

2. Элементы, которые появляются позже в дереве рендеринга, нарисованы выше их более ранние братья и сестры.

В вашем примере .elContainer с красным прямоугольником фактически расположен.Так что правило 1 выше не относится, но я все равно включил его, потому что это полезно знать.Однако .elContainer с красным полем появляется до .elContainer .someTextBlock в дереве исходного кода / рендеринга, и поэтому текстовый блок отображается поверх красного поля.Если вы добавите background-color в текстовое поле, вы визуально заметите, что оно нарисовано над красным полем.См. http://jsfiddle.net/PNktA/2/

См. Правило 5 и 8 в спецификации W3C, http://www.w3.org/TR/CSS21/zindex.html

Answer 2

Если вы установили более высокий z-индекс для первого элемента elContainer, чем для второго, вы можете успешно щелкнуть элемент управления для редактирования.