CSS заставляет элемент li появляться за пределами ul

Question

Учитывая этот код:

<div class="menu">
<ul>
    <li class="active">I'm active!</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

Мой div .menu имеет черную рамку размером 1 пиксель, а мой элемент списка .active имеет белый фон.Теперь я хочу, чтобы мой элемент списка .active находился «вне» div и перекрывался с границей, частично скрывая его на белом фоне.Как это достижимо?

Чтобы проиллюстрировать то, что я хочу;

Это то, что у меня есть на данный момент, закодировано;http://i.stack.imgur.com/cVZHt.png

И вот как это должно выглядеть;http://i.stack.imgur.com/gp2k2.png

Answer 1

Используйте относительное позиционирование.

.menu li {
    position: relative;
    top: 1px;
}

Несколько вещей, чтобы убедиться, что это работает:

• Тот факт, что это на все li elements является преднамеренным.Если я помещу его только в выбранный, то выбранный будет смещен вниз.
• Это будет работать, только если синий фон является частью тега ul, а тег li имеет прозрачныйфон (кроме изображения, конечно).В противном случае вы можете закрыть всю границу элемента ul.

---

И еще одну вещь (просто так).У вас есть это:

<div class="menu">
<ul>
...
</ul>
</div>

Тег ul вполне способен иметь класс самостоятельно.Если у вас нет веских причин не делать этого, просто сделайте следующее:

<ul class="menu">
    ...
</ul>

Answer 2

Немного черной магии CSS для вас.

Рабочий пример ниже, который должен работать в разных браузерах.Пожалуйста, спросите, хотите ли вы объяснить, как это работает.

JSFiddle

Наслаждайтесь.

Answer 3

Это z-индекс, который вы ищете?

div.menu li.active { z-index: 99; ... } 

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