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

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

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

    Savok32

    Регистрация:
    18 дек 2012
    Сообщения:
    331
    Симпатии:
    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]
     
    parampoparam нравится это.
  2. iga

    iga

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

    Savok32

    Регистрация:
    18 дек 2012
    Сообщения:
    331
    Симпатии:
    51
    и тогда картинки будут раздельны друг от друга
     
    parampoparam нравится это.
  4. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    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
     
    Savok32 нравится это.
  5. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    яж не отбалды, я код себе написал и всё работало в хроме опере и фоксе.
     
  6. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    не будет это работать, т.к. дивы будут располагаться один под одним.
     
  7. iga

    iga

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

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    покажите css с которым у вас работало, где вы выкинули индексы и смещения.
     
  9. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    <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]
     
  10. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
     
  11. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    $iD,
     
  12. $iD

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

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

    iga

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