Div с цветом фона перекрывает div со ссылками

Question

Div с цветом фона перекрывает div со ссылками

0

У меня есть небольшая проблема с двумя div с использованием z-index. Я создал div под названием topbar с z-index: 1, а другой называется "socialbuttons" с z-index: 2 который имеет ссылки на изображения в Facebook и Twitter. Тем не менее, верхняя панель перекрывает кнопки soc, и я не могу ни увидеть, ни щелкнуть социальные кнопки. Я просмотрел интернет и попробовал все, что мог, но я все еще придерживаюсь той же проблемы. Любая помощь будет принята с благодарностью. Вот мой код HTML

<div id ="topbar" 
    style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
</div>

<div id= "socialbuttons" 
    style= "position:relative; z-index: 1000; top: 15px; left: 770px; height:53px; width: 249px; margin-bottom: 0px;">

    <a href="https://twitter.com" target="_blank">

    <img alt="" src="images/twitter.png" 


        style="position:absolute; top: 0px; left:40%; height:49px; width: 59px; z-index:1000"/></a><a href="https://www.facebook.com" target="_blank"><img alt="" src="images/fbook.png" 

style="position:relative; width:50px; height:49px; top: 0px; z-index:1000"/></a></div>

JSFIDDLE

user3418385 14 март 2014, в 05:52

Источник

0

Вы используете какой-либо внешний файл CSS? Потому что ваш код работает нормально для меня. Проверьте это jsfiddle.net/chankeypathak/29sk4/1
Chankey Pathak 14 март 2014, в 04:57
0

Я удалил файл CSS, но все равно не повезло. Он прекрасно работает в режиме разработки VS 2010, но не работает ни в одном из моих браузеров. Я действительно в тупик!
user3418385 14 март 2014, в 05:12
0

Вы хотите разместить иконки социальных сетей в верхней панели? Если да, то почему вы можете поместить код внутри верхней панели div?
Leo T Abraham 14 март 2014, в 05:21
0

Я на самом деле тоже это попробовал. Все еще не повезло. <div id = "topbar" style = "высота: 56px; ширина: 95%; цвет фона: # 002268; индекс z: -1; позиция: относительная; верх: -6px; слева: -1px;"> < a href = " twitter.com " target = "_ blank"> <img alt = "" src = "images / twitter.png" style = "позиция: абсолютная; верх: 0px; слева: 40%; высота: 49px; ширина : 59px; z-index: 1000; float: right "/> </a> <a href=" facebook.com" target="_blank"> <img alt = "" src = "images / fbook.png" style = "позиция: относительная; ширина: 50px; высота: 49px; верх: 0px; z-index: 1000" /> </a> </ div>
user3418385 14 март 2014, в 05:42
0

Я на самом деле обнаружил, что источником проблемы является Firefox. Рекламодатель блокировал изображения в социальных сетях. Как только я отключил это, все коды работают просто отлично. Спасибо за вашу помощь :)
user3418385 14 март 2014, в 06:08

Показать ещё 3 комментария

Теги:

html

css

overlap

2 ответа

0

Просто удалите позицию относительно социальных кнопок

Вот рабочая ссылка

 <div id="socialbuttons" style="z-index: 1000; top: 15px; left: 770px; height:53px; width:   249px; margin-bottom: 0px;">

suraj rawat 14 март 2014, в 02:00

0

Ну что я могу видеть , что это работает нормально в режиме разработки , но он не работает в режиме исполнения imagizer.imageshack.us/v2/1028x56q90/545/cnpz.jpg скриншот выполнения imagizer.imageshack.us/v2/1306x110q90/401/f3xx.jpg
user3418385 14 март 2014, в 05:16
0

Тогда ваш другой структурный стиль создает проблемы, если он работает нормально в режиме дизайна
suraj rawat 14 март 2014, в 05:17

Ещё вопросы

Вы используете какой-либо внешний файл CSS? Потому что ваш код работает нормально для меня. Проверьте это jsfiddle.net/chankeypathak/29sk4/1
Я удалил файл CSS, но все равно не повезло. Он прекрасно работает в режиме разработки VS 2010, но не работает ни в одном из моих браузеров. Я действительно в тупик!
Вы хотите разместить иконки социальных сетей в верхней панели? Если да, то почему вы можете поместить код внутри верхней панели div?
Я на самом деле тоже это попробовал. Все еще не повезло. <div id = "topbar" style = "высота: 56px; ширина: 95%; цвет фона: # 002268; индекс z: -1; позиция: относительная; верх: -6px; слева: -1px;"> < a href = " twitter.com " target = "_ blank"> <img alt = "" src = "images / twitter.png" style = "позиция: абсолютная; верх: 0px; слева: 40%; высота: 49px; ширина : 59px; z-index: 1000; float: right "/> </a> <a href=" facebook.com" target="_blank"> <img alt = "" src = "images / fbook.png" style = "позиция: относительная; ширина: 50px; высота: 49px; верх: 0px; z-index: 1000" /> </a> </ div>
Я на самом деле обнаружил, что источником проблемы является Firefox. Рекламодатель блокировал изображения в социальных сетях. Как только я отключил это, все коды работают просто отлично. Спасибо за вашу помощь :)
Ну что я могу видеть , что это работает нормально в режиме разработки , но он не работает в режиме исполнения imagizer.imageshack.us/v2/1028x56q90/545/cnpz.jpg скриншот выполнения imagizer.imageshack.us/v2/1306x110q90/401/f3xx.jpg
Тогда ваш другой структурный стиль создает проблемы, если он работает нормально в режиме дизайна

Leo T Abraham · Accepted Answer · 2014-03-14T02-40-00.000Z

Я думаю, это то, что вы ищете

<div id ="topbar" style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
    <a href="https://twitter.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_twitter_box_white.png" style="float:right; height:49px; width: 59px;"/>
    </a>
    <a href="https://www.facebook.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_facebook_box_white.png" style="width:50px; height:49px;float:right;"/>
    </a>
</div>

скрипка