Невидимая часть фиксированного блока не дает нажимать на ссылки за ней — как исправить?

Question

[weranda]

Приветствую.
Есть простенький шиблон: шапка, контент, подвал и плавающий блок. Шапка и подвал закрашены цветом по всей ширине окна браузера, а вложенные в них блоки ограничены по ширине, как и блок основного контента. На странице еще есть плавающий блок, который должен быть выровнен по правому краю предельной ширины всех блоков, т. е. должен прилипать. Это настроил, но есть одно но — если откроете демку, то увидите мой подход: плавающему блоку задал такое же ограничение по ширине, как и другим блокам, а внутрь вложил еще один блок, спозиционировал его в крайнее правое положение и внутрь вложил три ссылки. А теперь о проблеме. A подвале есть три ссылки (Link-1/3) и когда плавающий блок находится на одном уровне с этими ссылками, то не могу нажать них (в подвале). Что надо изменить, чтобы была возможность нажимать на ссылки в подвале при нахождении на их уровне плавающего блока?

Answer 1

[Арсений Матыцин]

1. https://jsfiddle.net/za72f19s/
2. Либо ты можешь задать обертке .floating-block высоту 0px, убедиться, что нет overflow:hidden;, а дочернему указать его высоту, к примеру (не обязательно, но я не уверен).
3. Использовать вычисляемое расстояние от правого\левого края (да, я понял, что ты пытаешься сделать → чтобы плавающий блок был в рамках контентной сетки).

И принять тот факт, что объекты, которые не имеют фона вовсе не прозрачные для событий мыши. Ну и проще такое делать с заливкой во всю ширину, чтобы избежать конфликтов. Первый пункт может к ним привести.

PS: float-ы → прошлый век, сейчас используют для этого флексы и есть ради чего.

Comments

[weranda]

Спасибо.
Первый вариант прост и понятен + работает (почти во всех браузерах).
Второй вариант сам пробовал вчера, но он не работает — при задании высоты 0px родительскому блоку, предположительно из-за position: fixed;, как не задавай высоту дочерним блокам, они не появляются (скрыты).
Третий вариант возможен и даже можно на JS все это дело запилить, но просто нах)

А какие конфликты может вызвать первый вариант?
А по поводу float/flex, надо будет заняться изучением. Много раз читал, но забивал на это дело, так как нужна была поддержка IE9-10. Она и сейчас, как бы это ни звучало странным, нужна.

[Арсений Матыцин]

weranda, да, я несколько покривил душой, так как расчет координат идет не как в декартовой, а сверху вниз. Поэтому без особых проблем такое будет работать примерно так. А для того, чтобы прибить к низу и выровнять поверхность надо немного покорячиться либо с позиционированием, либо трансформированием.

Конфликты, я на своей практике несколько раз сталкивался с тем, что управление pointer-events не работало, к примеру, в сафари. Плюс можно напортачить с позиционированием. В общем такое себе дело на самом деле, много проще не делать дизайн, который заставляет идти на такие ухищрения.

Answer 2

[Степан Крапивин]

pointer-events

.floating-block{
  pointer-events: none;
  ...
}

.floating-block__links{
  pointer-events: all;
  ...
}

Answer 3

[Игорь]

Установи этому плавающему блоку display: inline-block;и убери width: 100%;

Comments

[weranda]

Тогда непонятно как прилепить плавающий блок ровно к правой части контента.

[Игорь]

что бы невидимая часть блока не перекрывала контент, вам нужно поместить его в контейнер с высотой 0, который в свою очередь имеет position: fixed; и с помощью абсолютного позиционирования вытащить блок который вам нужно из этого "невидимого" контейнера.

[Игорь]

Answer 4

[Lord_Dantes]

Может быть имеет смысл задать родителю ссылок relative и z-index больше чем позиционированного блока?

Comments

[weranda]

Пробовал и так, но тогда плавающий блок скрывался при скроллинге за подвалом или же ссылки подвала перекрывали плавающий блок.