1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Решено] рамка

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Savok32, 19 фев 2016.

Статус темы:
Закрыта.
  1. Savok32

    Savok32

    Регистрация:
    18 дек 2012
    Сообщения:
    333
    Симпатии:
    51
    .wrapper{width:270px; height: 415px; border:1px solid #ccc;position: relative; z-index:2; }
    .img_skill {position: absolute; top:55px; left:26px; z-index:1; }

    <div class="wrapper"><img src="270px-CardSkin_Frame_Legendary_b.png">
    <div class="img_skill"><img src="Card_Big_Game.png"></div>
    </div>

    Подскажите, почему не работает z-index ? получается так [​IMG]
     
    Savok32, 19 фев 2016
    #1
    parampoparam нравится это.
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    HTML:
    <div class="img_skill"><img src="image/back.png"></div>
<div class="wrapper"><img src="image/frame.png"></div>
    и из css выкинуть эти индексы и смещения.
     
    iga, 19 фев 2016
    #2
  3. Savok32

    Savok32

    Регистрация:
    18 дек 2012
    Сообщения:
    333
    Симпатии:
    51
    и тогда картинки будут раздельны друг от друга
     
    Savok32, 19 фев 2016
    #3
    parampoparam нравится это.
  4. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    HTML:
    <html>
    <head>
        <style type="text/css">
            .wrapper{
                width:270px; height: 415px; border:1px solid #ccc;position: relative; z-index:2;
            }
            .img_skill {
                position: absolute;
                background: url('img/Card_Big_Game.png') no-repeat;
                top: 59px;
                left: 34px;
                z-index: 1;
                width: 216px;
                height: 165px;
            }
            .legend {
                background: url('img/270px-CardSkin_Frame_Legendary_b.png') no-repeat;
                width: 270px;
                height: 415px;
                z-index: 2;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="legend"></div>
        <div class="img_skill"></div>
    </body>
</html>
    Вот так.

    Не работало, потому что z-index работает только на позиционированных эл-ах: http://htmlbook.ru/css/z-index
     
    $iD, 19 фев 2016
    #4
    Savok32 нравится это.
  5. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    яж не отбалды, я код себе написал и всё работало в хроме опере и фоксе.
     
    iga, 19 фев 2016
    #5
  6. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    не будет это работать, т.к. дивы будут располагаться один под одним.
     
    $iD, 20 фев 2016
    #6
  7. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    А у вас как?
    Ну или разъясните мне в чем моя глобальная ошибка. Я-то видел, что у меня всё сработало.
     
    iga, 20 фев 2016
    #7
  8. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    покажите css с которым у вас работало, где вы выкинули индексы и смещения.
     
    $iD, 20 фев 2016
    #8
  9. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    <div class="img_skill"><img src="image/back.png"></div> - подложка #590d0d
    <div class="wrapper"><img src="image/frame.png"></div> - квадрат с дыркой #c3c3c3

    .img_skill {position: absolute;}
    .wrapper{width:400px; height: 300px; position: relative;}

    [​IMG]
     
    iga, 20 фев 2016
    #9
  10. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
     
    $iD, 21 фев 2016
    #10
  11. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    $iD,
     
    iga, 21 фев 2016
    #11
  12. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    с радостью бы ответил почему у вас так, но не знаю. У меня получается так же, только если у wrapper отключить relative) Ну т.е. у кого-то css не весь или вы сбросили не весь или я не знаю))
    и в любом случае позиционирование будет нужно) это я к вашему комментарию:
    т.е. смещение всёравно нужно будет.
     
    $iD, 21 фев 2016
    #12
  13. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Да, это я не подумал - у меняж картинки другие были.
    А у меня как раз в таком варианте картинка над рамкой :Smile:. При чем в 4х браузерах всё одинаково и на 2х других компах прикинул!
    вот мой вариант - http://inaudio.ru/2016/index.html
     
    iga, 21 фев 2016
    #13
    $iD нравится это.
< Проблема со стилями таблиц в Mozilla | Не отображается картинка на мобилах >
Статус темы:
Закрыта.