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

Тема в разделе "Верстка", создана пользователем sandi, 28 фев 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. sandi

    sandi

    Регистр.:
    30 май 2008
    Сообщения:
    314
    Симпатии:
    165
    Здравствуйте,
    подскажите пожалуйста в данном решении
    добавляю изображение для категории в блоке в котором выводиться изображение
    добавлена рамка изображением, но само добавленое изображение отображаеться
    выше самого слоя с рамкой, но нужно чтобы оно отображалось под рамкой прописывал в коде для слоев 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; } 
    изображение залазит под рамку, но отображаемые категори списком
    исчезают их к примеру четыре, а остаеться одна отображаться
     
  2. Darkness

    Darkness Постоялец

    Регистр.:
    21 янв 2013
    Сообщения:
    146
    Симпатии:
    69
    Очень маленький z-index, но лучше используй для этих целей padding, чтобы картинка не вылазила за рамку или я не понял суть вопроса.
     
  3. sandi

    sandi

    Регистр.:
    30 май 2008
    Сообщения:
    314
    Симпатии:
    165
    прописывал и z-index:9999 с !important; :nezn:
    в нижней части рамки непрозрачный фон, вот и получаеться что добавленное избражение
    отображаеться выше фона рамки, а нужно посадить отображение изображения под рамкой
     
  4. Forza.Baron

    Forza.Baron

    Регистр.:
    26 янв 2012
    Сообщения:
    175
    Симпатии:
    76
    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;
    Стили подгоняйте под себя.
     
    sandi нравится это.
  5. alexmay

    alexmay Создатель

    Регистр.:
    7 июн 2011
    Сообщения:
    47
    Симпатии:
    5
    Если я правильно понял вопрос, то вам необходимо с позиционировать ваше изображение в списке путем смещения по Y

    HTML:
    background:url('../image/ramka.jpg') no-repeat 0px(ось X) 5px(ось Y);
     
Статус темы:
Закрыта.