Один слой перекрывает другой?

Question

[Алексей Каратеев]

Здравствуйте, сделал слайдер, я хочу вывести картинку (.avatar) за пределы другой картинки, но картинка уходит в никуда. Вроде position: absolute есть, z-index тоже поставил, но не работает ничего.

<ul class="bxslider">
						<li>
							<img src="img/bg__text.png"/>
							<img src="img/avatar-1.png" alt="Anatar" class="avatar">
							<div class="comment">
								<h5>John Doe</h5>
								<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br> nostrud exercitation ullamco laboris nisi ut aliquip ex ea
								</p>
							</div>
						</li>
						<li>
							<img src="img/avatar-2.png" alt="Anatar" class="avatar">
							<img src="img/bg__text.png"/>
							<div class="comment">
								<h5>John Doe</h5>
								<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br> nostrud exercitation ullamco laboris nisi ut aliquip ex ea
								</p>
							</div>
</ul>

.avatar {
	position: absolute;
	top: 50px;
  left: -30px;
  z-index: 9999; 
}

.comment {
	position: relative;
	top: -135px;
	left: 30px;
}

.comment p {
	color: #78909c;
	line-height: 1.6em;
	padding-top: 16px;
}


.bx-wrapper {
	border: none;
	background: none;
	position: relative;
	padding-top: 97px;
	margin-bottom: 0;
	top: 0;
	z-index: 1;
}

.bx-wrapper .bx-controls-direction a {
	position: relative;
	top: 0;
	left: 50%;
	z-index: 9999;
}

.bx-wrapper .bx-prev  {
	display: block;
	top: -575px !important;
}

.bx-wrapper .bx-next {
	display: block;
	top: -75px !important;
}

.bx-wrapper .bx-pager {
	display: none;
}

Comments

[Rustam Bainazarov]

Где-то overflow: hidden стоит. Вполне возможно, что на контейнере, стили которого вы не дали (.bx-slider, например, ибо если это слайдер, то там всегда он есть).

И зачем z-index: 9999?

[Алексей Каратеев]

Рустам Байназаров, да, действительно, overflow: hidden стоит в body, но когда я нго убрал ничего не изменилось.
А z-index: 9999 ставят, чтобы элемент точно был выше других, правда это не помогает.

[Rustam Bainazarov]

Алексей Каратеев, я к тому, зачем такое значение? Ищите ещё overflow. А если у вас слайдер, у которого есть overflow, вам надо либо уменьшить блоки, чтобы они умещались в область обрезки, либо же хаками ширины и отступов.

[Brad9aga]

Рустам Байназаров, в html посмотри что стоит перед закрывающим ul,там все лишком мощно

[Rustam Bainazarov]

Brad9aga, это ошибка в разметке, она не влияет на обрезку. Да и браузеры достаточно хорошо такие ошибки обрабатывают.

[Brad9aga]

Рустам Байназаров, в том что браузер сам закроет лишку я вкурсе)