Как позиционировать элемент ul над фоном link-image?

Question

Я хочу разместить элемент <ul> на фоне ссылки-изображения (черный квадрат).

Справа от слов «ОБО» и «КОНТАКТЫ» я не могу нажать на изображение ссылки. Мне нужно быть в состоянии щелкнуть по фону link-image каждый раз, где за пределами текстовых ссылок .

Вот что я пробовал: Jsfiddle

HTML:

<div class="weekend"> 
<a href="/all"> 
    <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg"> 
</a>   
<ul class="all"> 
    <li class="about"><a href="/about">About</a></li> 
    <li class="contacts"><a href="/contacts">Contacts</a></li> 
</ul> 

CSS:

.all{ 
    position: absolute; 
    width: 290px; 
    top: 15px; 
    left: 15px; 

} 

.about{ 
    display: block; 
    font-size: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
} 

.contacts{ 
    display: block; 
    font-size: 20px; 
    font-weight: 400; 
    text-transform: uppercase; 
} 

Answer 1

Вот один из способов сделать это, не имея абсолютно позиционирование каждая связь.

Начать с HTML:

<div class="weekend"> 
    <a href="/all"> 
     <img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg"> 
    </a>   
    <ul class="all"> 
     <li class="about"><a href="/about">About</a></li> 
     <li class="contacts"><a href="/contacts">Contacts</a></li> 
    </ul> 
</div> 

и изменить свой CSS следующим образом:

.weekend { 
    position: relative; 
} 
.all { 
    display: inline-block; 
    position: absolute; 
    width: 10px; /* Set to a small value, 0 will also work */ 
    top: 15px; 
    left: 15px; 
    margin: 0; 
    padding: 0; 
    border: 1px dashed yellow; 
} 
.all li { 
    display: inline-block; 
    font-size: 20px; 
    text-transform: uppercase; 
    border: 1px dotted yellow; 
} 
.about{ 
    font-weight: 700; 
} 
.contacts{ 
    font-weight: 400; 
} 

Во-первых: набор position: relative к .weekend, таким образом ul.all позиционируется относительно его родительский блок контейнера ,

Для ul.all нулевой маркер и отступ для сброса любых нежелательных пробелов и затем установите display: inline-block, чтобы получить ширину усадки.

Для элементов link link, ul.all li, используйте display: inline-block, который будет , что даст вам лучший контроль над заполнением и полями, если необходимо.

Ключевым моментом здесь является установка ширины ul.all на небольшое значение, например 10px, (0 также работает). Это сжимает края ul.all, так что они больше не расширяют за пределами краев элементов ссылки li, поэтому вы можете щелкнуть элемент фона за пределами краев встроенных ящиков, содержащих текст ссылки.

По существу, ul.all li элементы переполнены за пределами краев родительского ul.all контейнера, который является немного странным, но в этом случае, именно то, что требуется.

См демо по адресу: http://jsfiddle.net/audetwebdesign/91ea4tfw/

Обратите внимание, что вы можете добавить верхнее/нижнее поля для ul.all li и в результате пробельные также позволит вам нажать на ссылку фоне образа. В этом случае обязательно установите width: 0 в ul.all и удалите желтую рамку (только для демонстрации).