Позиционирование

[sandi]

Здравствуйте,
подскажите пожалуйста в данном решении
добавляю изображение для категории в блоке в котором выводиться изображение
добавлена рамка изображением, но само добавленое изображение отображаеться
выше самого слоя с рамкой, но нужно чтобы оно отображалось под рамкой прописывал в коде для слоев z-index но реакции никакой

вот собствнно сам код в котором должно быть решение

.category-list ul li{
float: left;
position:relative;
margin:12px;
width: 195px;
height: 160px;
background:url('../image/ramka.jpg') no-repeat;
z-index:2; }
.category-list img {
top:0px;
position:absolute;
left:0px;
margin: auto;
text-align:center;
}

менял местами

.category-list ul li {position:absolute;}
.category-list img { position:relative; }

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

 

[Darkness]

Очень маленький z-index, но лучше используй для этих целей padding, чтобы картинка не вылазила за рамку или я не понял суть вопроса.

 

[sandi]

Очень маленький z-index, но лучше используй для этих целей padding, чтобы картинка не вылазила за рамку или я не понял суть вопроса.

прописывал и z-index:9999 с !important;
в нижней части рамки непрозрачный фон, вот и получаеться что добавленное избражение
отображаеться выше фона рамки, а нужно посадить отображение изображения под рамкой

 

[Forza.Baron]

sandi, дайте исходники, эти файлы, и если можно пример в рисуночном формате, а-то я не могу представлять что вам нужно...

Одно решение, это рамку использовать не как бекгроунд.

<style>
.category-list ul li{
float: left;
position:relative;
margin:12px;
width: 195px;
height: 160px;
border: 4px double black;
z-index:5; }
.category-list .aa {
top:0px;
position:absolute;
height: 150px;
width: 150px;
left:0px;
margin: auto;
text-align:center;
z-index:3;
}
.category-list .bb {
float:left;
top:100px;
position:absolute;
height: 150px;
width: 150px;
left:0px;
margin: auto;
text-align:center;
z-index:4;
}
</style>
 
<div class="category-list">
<ul>
  <li> <div class="aa"><img src="a.jpg"/> </div><div class="tekst">Tekst</div><div class="bb"> <img src="1.jpg"/> </div>
  </li>
</ul>
<ul>
  <li> <div class="aa"><img src="a.jpg"/> </div><div class="tekst">Tekst</div><div class="bb"> <img src="1.jpg"/> </div>
  </li>
</ul>
</div>

1.jpg - синий фон
a.jpg - картинка сверху синего фона
рамку сделаете через border: 4px double black;
Стили подгоняйте под себя.

 

[alexmay]

Если я правильно понял вопрос, то вам необходимо с позиционировать ваше изображение в списке путем смещения по Y

background:url('../image/ramka.jpg') no-repeat 0px(ось X) 5px(ось Y);