Switch74

в оригинале есть margin-bottom:60px; который и не дает перекрывать контент и footer идет за container у вас footer находится в container и стили уж совсем разные, а не слегка но у вас я не заметил, чтобы footer наезжал на контент

у меня такой проблемы нет, но у меня не так давно была другая проблема: я не мог сохранить код в jsfiddle возможно они что-то правят/обновляют и появляются какие-нибудь ошибки? Возможно у вас подключено какое-нибудь расширение вредное, а может стоит переустановить браузер... Пробовали в других браузерах открывать?

А если попробовать кэш очистить?

через flex можно попробовать, чтобы по коду желтая кнопка была выше зеленой, но визуально так как сейчас, тогда желтый:hover+зеленый{}

ну что-нибудь вроде <div class="click" data-url="https://jsfiddle.net/"> <span>next</span> <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> <a href="#">link</a><button>button</button> </div> <script> $(function() { $('.click').on('click',function(e) { if(e.target.tagName == 'A') return true; else if(e.target.tagName == 'BUTTON') return true; else { window.location.href = $(e.currentTarget).attr('data-url'); } return false; }); }); </script> что-то не получилось у меня в jsfidle сохранить

скрывайте стандартный кружок и вставляйте через псевдоэлемент другой

скрывайте стандартный кружок и вставляйте через псевдо элемент другой

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

padding нужно указывать для nav

потому что display:inline-block; нужно для того, чтобы вертикальные padding и margin работали так, как вам нужно а то что у button они отрабатывают даже с inline, посмотрите в инструменте разработчика что браузер поумолчанию фигачит на кнопку и если вы тоже самое поставите для span то он будет вести себя так же как button (что именно отвечает за подобное поведение я не вникал, да и не суть на мой взгляд)

чтобы пункты меню не перекрывались, можно для выпадающего меню сделать отступ снизу равный этому элементу чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative; и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

Можно

@npofopr А как это можно сделать? <meta name="format-detection" content="telephone=no"> - вроде только для мобил и iPhone или я ошибаюсь?

если размеры строгие можно указать высоту, иначе можно подогнать через vw или calc()

в input нельзя использовать after и before http://shpargalkablog.ru/2013/12/input-before-after.html

выложите в jsfiddle.net

если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента z-index всегда работает относительно контекста, т.е. есть у вас например два div с span <div> <span></span> <span></span> </div> <div> <span></span> <span></span> </div> устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив /span[0] /span[1] /span[2] /span[3] все span будут выравниваться по z-index относительно друг друга теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится /div[0] /span[0] /div[0] /span[1] /span[2] /span[3] тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div еще это можно объяснить на примере комнаты: смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно на полу у вас лежат листки, на стуле и на столе листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

opacity:0.99; создает новый контекст на который не влияет z-index:1; и он как бы остается z-index:auto; если вы добавляете position: relative; то z-index:1; начинает работать

рядом с var xhr = new XMLHttpRequest() ставим var array = {}; и приравниваем ему array = JSON.parse(xhr.responseText); все можете делать с массивом array все что захочется

попробуйте использовать данный скрипт в идеальных условиях и добавляйте в них потихоньку свои скрипты и модули, так найдете с чем конфликтует скрипт. Еще это может быть css который влияет на плавающее меню. Т.к. скрипт в идеальных условиях в демо работает норм, скорее всего он именно с чем-то конфликтует. На данный момент у вас скрипт через раз определяет правильную высоту плавающего блока из-за чего и скачет. Я вижу у вас есть информация, которая грузится через js в плавающий блок, возможно она влияет на это. Еще бывает такой момент: когда сайт перегружен скриптами и они все отрабатывают на одно и то же событие, на это тратится время, что приводит к задержке отработки последних скриптов и как результат они могут отрабатывать с задержкой.

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

додумался сам, примеров в инете много, но не всегда получается найти под свои нужды именно то что нужно, изучаешь основы (маленькие конструкции) из них собираешь большие - ничего сложного.

https://jsfiddle.net/kx8qbruc/

возможно это решить через display:inline-block; для <p>

https://jsfiddle.net/ey3ycfvL/