div position: relative в <a> tag на мобилни устройства

[Torbalan Trolski]

Общо взето опростен пример с подобен markup

<a href="***" class="buglink">
    <div style="position: relative;">
        <div style="position: absolute;">
            Дрън дрън
        </div>

        <img width="300" height="300" ... >
    </div>

    <h3>Ала бала</h3>
</a>

На десктоп всичко е точно където и да се кликне линка работи.

Обаче на мобилни устройства може да се клика само във вътрешния div с position: absolute.

 

[Sky]

Сложи му на първия div:

float: left;

 

[Torbalan Trolski]

Сложи му на първия div:

float: left;

Не става. Обаче след малко ровене и мислене сутрин свежа глава го фикснах.

.buglink {
    display: block;
    position: relative;
    z-index: 100;
}

 

[rr4ev]

Не е лошо, когато позиционираш някой елемент с position: absolute - да му задаваш top и left (или right) properties.

Добре си направил, че си задал на линка display: block (също върши работа и display: inline-block), защото по подразбиране е с display: inline. Все пак е предназначен за част от текста, а не за wrapper.

 

[Torbalan Trolski]

Не е лошо, когато позиционираш някой елемент с position: absolute - да му задаваш top и left (или right) properties.

Е нали това е идеята да го позиционирам в другия див

 

[maniacal]

Друго имаше предвид с property-тата top, right, bottom, left, според мен. Ако му дадеш position: absolute, без тези property-ta елемента излиза от document flow-a, но се позиционира на същото място, на което трябва да е в document flow-а, ако не е absolute.

Например:

<div id="parent" style="position: relative; padding: 20px><div id="child" style="position: absolute"></div></div>

Тук елемента child ще е на по 20px разстояние от най-лявата най-горна точка на елемента parent.

<div id="parent" style="position: relative; padding: 20px><div id="child" style="position: absolute; top: 0; left: 0"></div></div>

Тук елемента child ще е на по 0px разстояние от най-лявата най-горна точка на елемента parent.

Възможни са различия в поведението на браузърите. Аз лично предпочитам винаги explicit позициониране.