Поиск по сайту

Результаты поиска по тегам 'z-index'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 16 результатов

  1. страница отображается во всех браузерах правильно, кроме chrome: баннера перекрывают выпадающее меню что не так для chroma? вот ссылка на страницу http://centrpol.com.ua/index.html прин-скрин прикрепил: слева во всех брайзерах верно, справа в Хроме не верно
  2. Народ, всем привет! Есть сайт: http://handmademania.ru/b2b/ Щелкаем пункт верхнего меню "Расчёт заказа". Нас прокручивает вниз к анкете. Так вот, в ячейке "Мастер-классы, которые вы выбрали" я сделал список с мультивыбором. Проблема в том, что список большой,и он пересекается с кнопкой "Отправить". А если надо выбрать элемент списка, который на одном уровне с кнопкой, то кнопка становится на переднем плане, а мне надо, чтобы на переднем плане был выпадающий список. С z-index пробовал - не помогло, Пробовал z-index вместе с position:relative и без, но пока безрезультатно (( Помогите пожалуйста, кто может. Скриншот по ссылке: Скриншот.
  3. В макете нужно реализовать наложение картинки на меню, но хотелось бы при этом оставить элементы меню доступными для клика полностью, а не частично. Сейчас реализовано так, что доступна только верхняя часть кнопки https://arthurmiko.github.io/shadows_portfolio/ Здесь воспроизведена подобная ситуация и вопрос относительно этого случая. Можно ли как-то оставить серые блоки доступными для курсора, в области их перекрытия синим блоком? Наверняка это можно реализовать с помощью JS, но есть ли способ обойтись HTML/CSS?
  4. Доброго времени суток, сегодня начался рабочий день и я продолжил свою работу по web проекту, но вот наткнулся на одну проблему. Есть модальное окно при открытии которого появляется форма отправки сообщений, и решил я на одной странице добавить картинкам (в постах) прозрачности (css opacity) добавил эффект плавного изменения прозрачности для hover этой картинки и все бы хорошо, но при открытии модального окна картинка вылазит на перед этого окна (как будто кто то дописал z-index:99999;) при чем если убрать свойство opacity у картинки то при открытии модального окна все отображается нормально! Что это может быть? http://test.sud-expertiza.dp.ua/available-properties.html - ссылка на страницу теста. По нажатию на Contact вылазит модальное окно и вы сможете увидеть эту неприятность. У меня Chrome на предмет других браузеров не смотрел.
  5. http://jsfiddle.net/tr0zurq1/ Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>. По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент. Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню? <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }
  6. Добрый день. Подскажите пожалуйста как сделать чтобы Колеса от фона хедера были сверху остальных полей. z-index не работает. Сайт arlekin.su. чтобы поднять слайдер до нужной высоты я использовал маргин-топ - 50 в .front_slider_wrapp {. Очень прошу помочь, или хотябы направить в нужную сторону.
  7. Добрый вечер форумчане. Столкнулся с такой проблемой. Никак не получается наложить полупрозрачный фон на изображение. Пример можно посмотреть здесь http://rezka.plasmainfo.ru. Заранее спасибо за ответы.
  8. Здравствуйте!Подскажите пожалуйста. Попробовал наложить форму подписки от Jastclick (форму сделал полупрозрачной) на рисунок. Все получилось, но есть засада... Рисунок я могу двигать вверх-низ, вправо-влево, а форму подписки могу только двигать вправо-влево, а вверх-вниз не хочет! В чем может быть проблема? Подскажите пожалуйста. Проделываю это на своем блоге: free-pc.ru, там пока прежнюю форму оставил. Код прилагаю: <!-- Стиль вывода формы подписки JastClick (работа со слоями) --> <style>#layer1, #layer2, #layer3 {position: relative; /* Относительное позиционирование */} #layer2{top: -220px; /* Сдвигаем рисунок вверх */left: 90px; /* Сдвигаем рисунок вправо */} #layer1{top: 100; /* Сдвигаем форму вверх (Не работает, пробовал также и отрицательные значения) */left: 0px; /* Сдвигаем форму вправо (Работает) */} #layer1 { z-index: 3; }#layer2 { z-index: 1; }#layer3 { z-index: 2; }</style> <div id="sidebar"> <div class="marat-2"><div id="layer3"><p>Бесплатно получать <br /> статьи блога почтой:</p></div></div> <!-- Форма подписки выводится в верхнем слое --> <div id="layer1"> <!--Дальше идет код Формы подписки justclick.ru (добавил style=" background-color: rgba(132, 175, 201, 0.5) !important; (для прозрачности формы) --> </div> <!-- Рисунок выводится на заднем слое --> <div id="layer2"><img src="http://free-pc.ru/images/gerl/gerl3_3.jpg" alt="Подписаться"></div> </div>
  9. Всем привет! Озадачился с проблемой(подробнее на картинке): Нюанс - Черепашка относится к Layer1 как одна общая картинка. Если Layer1 по z-index выше то я не могу нажать Button1 Если Layer 2 по z-index выше то черепахе голову обрубает)
  10. Доброго времени суток Вот уже 2 день ломаю голову над решением проблемы с z-index. Хочу сделать выпадающее вниз краткое описание при навидении мышкой без JS, JQuery и прочих умных вещей). Только СSS. Вот куски кода: <style>.item{ width: 40%; position: relative; display: inline-block; background-color: #bbb; float: left;}.item:hover{ z-index: 5;}.short_desc{ display: none;}.item:hover .short_desc{ display: block;}</style><div class="item"> <h3>Rock Shox Domain 318 Coil 170</h3> <img src="img/items/1.jpg" /> <p><strong>Цена:</strong> <span>2555 грн.</span></p> <div class="short_desc"> Краткое описание<br /> <a href="">Buy</a> </div></div><div class="item"> <h3>Rock Shox Domain 318 Coil 180</h3> <img src="img/items/1.jpg" /> <p><strong>Цена:</strong> <span>2555 грн.</span></p> <div class="short_desc"> Краткое описание<br /> <a href="">Buy</a> </div></div>и т.д.Проблема в том, что при навидении на товар он все равно опускает нижние товары, хотя (по-моему) должен налезать на них. Если брать абсолютную позицию - блок с кратким описанием не наследует стилей родителя. Как быть? Буду очень благодарным за Вашу помощь.
  11. Доброго дня всем. Возникла проблема с выпадающим меню на сайте http://izodecor.md , а точнее никак не удается выдвинуть меню вперед. z-index не помогает или я что-то не так делаю (я новичок в этом) хотя сам DIV с меню располагается внутри "злого" DIV-а который и перекрывает меню . Устал биться - перечитал с полсотни постов и так ничего и не понял - прощу помощи. Не сплю уже вторые сутки и мозг просто не выдержит еще даже 10 страниц чтива. Подозреваю, что проблема кроется в "overflow: hidden" но самостоятельно не догоняю, где чего исправить. В общем - HELP!
  12. Есть пример-задача: http://jsfiddle.net/realovich/r4wdA/ В ней блок с классом "red" с помощью трансформации создает новый контекст наложения. Если присвоить любую трансформацию к блоку с классом "green" - этот блок попадает в тот же контекст, что и red, а вот img даже с трансформацией не хочет попадать в этот же контекст. Помогите, CSS-гуру.
  13. вот сайт geometrica.biz в хедере есть логотип и два блока меню. Проблема состоит в том что логотип налаживается на два блока меню из-за этого они становяться неактивные. проблема в том что у логотипа стоит z-index выше чем у блоков меню, но я не знаю как это решить, помогите пожалуйста!
  14. Всем привет! Вот хотел бы поинтересоваться как правильно сделать эту штуковину, на ум конечно приходит много идей, в том числе и разбиение логотипа на 2 части, но пока остановился на таком варианте, так как он мне кажется самым нормальным. http://jsfiddle.net/K7UV3/2/ З.Ы. - header и opol полностью статичны, в них ничего не тянется и текстом дополняться скорее всего не будет. В диве logo будет еще 2 дива. 1 для текста - имей дело с лучшими 2ой для названия компании. Хотя можно обойтись и без 2ух дивов, не столь важно. Opol - это див с бэкграундом-картинкой, внутри которого будут находиться еще 2 рекламных дива размеров 486х60 с низу. Вот для наглядности что планирую:
  15. Есть меню с z-index:20; (и подменю с z-index:21) сразу после меню идет картинка с привязанной map-area (z-index:10); При наведений на меню выпадает подменю, но map-area перекрывает подменю, проблема только в сафари win7. http://i.imgur.com/UtQOqxw.jpg чтобы понятней было http://i.imgur.com/3EKM6Sy.jpg код
  16. Друзья, проблема такая. Есть две кнопки для листания карусели вперёд и назад (.prev и .next), мне нужно их разместить за блоком #page, в котором эта карусель находится. Дизайнерская задумка такая, что тень от #page падает на эти блоки, а тень, отбрасываемая блоками, частично скрывается за блоком #page. То есть #page находится над .prev и .next. Но почему-то не получается у меня поместить эти стрелки в нужное место, в результате они сами отбрасывают свою тень на #page. То есть они находятся над контейнером, в который помещены, а не под ним, как мне это нужно. Танцы с бубном вокруг z-index и position мне не помогли.. Подскажите, вообще задача реальная стоит? И если реальная, как добиться нужного результата? В коде ниже есть ещё блок header, его у меня получилось над #page поставить. А вот с .prev и .next фиаско.. Помогите, пожалуйста, советом. <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>тест</title> <meta name="description" content="тест"> <style> body { background: #a1a1a1; margin:0;font-size:1em;line-height:1; } .wrapper { margin: 0 auto; padding: 0; width: 760px; position: relative; } header { position: fixed; top: 0; height: 30px; width: 100%; background: #54005c; box-shadow: 0 0 9px rgba(0,0,0,.32); overflow: hidden; z-index: 10; } #page { background-color: white; min-height: 800px; top: 30px; box-shadow: 0 0 9px rgba(0,0,0,.32); font-size: 14px; z-index: 3; } #panel { position: relative; top: 14px; background: #eee; height: 60px; } a.prev, a.next { position: absolute; background: #eee; z-index: 5; width: 40px; height: 60px; box-shadow: 0 0 7px rgba(0,0,0,.32); } a.prev { left: -40px; } a.next { right: -40px; } </style> </head> <body> <header> </header> <div id="page" class="wrapper"> <section id="panel"> <a class="prev" id="prev_btn1" href="#"><span>prev</span></a> <a class="next" id="next_btn1" href="#"><span>next</span></a> </section> </div> </body> p.s. Вёрстка только под современные браузеры.