Наложение картинки на кнопки

[Евгений_SB]

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

не знаю как решить эту проблему

есть контейнер с 2 кнопками и картинкой согласно дизайна (скрин 1) кнопки должны быть внизу картинки но при верстке картинка на них наслаивается и кнопки не реагируют на нажатия (на скрине 2 видно)

пробовал и z-index  использовать ничего не выходит какие есть еще способы

 

код HTML

<div class="banner">
			
                <a href="#" class="button_left">
                    <img src="images/button-left.png" alt="">
                </a>
				
                <a href="#" class="button_right">
                    <img src="images/button-right.png" alt="">
                </a>
				
                <img src="images/banner-img.png" alt="" class="banner_img_top">
                
           </div>

 

код css

.banner {
    width: 960px;
	height: 290px;
    margin: 0 auto;
}

.button_left {
    display: block;
	float: left;
	margin-top: 200px;
	margin-left: 5px;
}
.button_right  {
   display: block;
	float: left;
	margin-top: 230px;
	margin-left: 5px;

}
.banner_img_top {
    display: block;
    float: left;
	position: absolute;
}

 

[mrnobody]

А вы кроме z-index задавали кнопкам position: relative; ? Попробуйте так:

И для плавающих элементов float: left; float: right; или position: absolute; position: fixed; не обязательно указывать dislay: block;

.banner {
  width: 960px;
  height: 290px;
  margin: 0 auto;
}

.button_left {
  position: relative;
  z-index: 1;
  float: left;
  margin-top: 200px;
  margin-left: 5px;
}
.button_right {
  position: relative;
  z-index: 1;
  float: left;
  margin-top: 230px;
  margin-left: 5px;

}
.banner_img_top {
  float: left;
  position: absolute;
}

 

[Евгений_SB]

mrnobody все спасибо все заработало, теперь понятно