Блог

Главная - Вопросы по программированию - как переместить элемент за пределы контейнера?

как переместить элемент за пределы контейнера?

#html #xhtml #css

#HTML #xhtml #css

Вопрос:

Я пытаюсь переместить изображение с текстом «top Score» за пределы родительского div #wrapper 

 <div id="wrapper">
        <div class = "col1-content">
             <div class="ribbon left">
                <h2>My top Score</h2>
             </div>

        </div> <!-- col1-content -->
</div>

#wrapper .col1-content .ribbon{
    position: absolute;
    width:330px;
    height: 89px;
    z-index: 10;

}

#wrapper .col1-content .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
    left: -35px;
}

#wrapper .para h2{
    font-family:"Lucida Console", Monaco, monospace;
    font-size:24px;
    font-weight:lighter;
    padding-left: 30px;
}

Комментарии:

1. Я извлек изображение и загрузил его в другое место для вас.

Ответ №1:

 <div id="wrapper">
        <div class = "col1-content">
             <div class="ribbon left">
                <h2>My top Score</h2>
             </div>
            <div class="para-score">
                <ul>
                    <li id="avatar"></li>
                    <li id="name"></li>
                    <li id="score"></li>
                </ul>
            </div>
        </div> <!-- col1-content -->
</div>

#wrapper {position:relative;}

#wrapper .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
    left: -35px;
    top:0;
    position:absolute;
}

Комментарии:

1. Проблема все еще существует. Есть идеи??

Ответ №2:

Ваш текст исчезает на этой странице, потому что используемый вами класс «left: -35px;» имеет относительное положение. Вы должны либо присвоить ему абсолютную позицию, либо переместить «left: -35px;» в класс .ribbon .

 #wrapper .col1-content .ribbon{
    position: absolute;
    left: -35px;
    width:330px;
    height: 89px;
    z-index: 10;

}

#wrapper .col1-content .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
}

#wrapper .para h2{
    font-family:"Lucida Console", Monaco, monospace;
    font-size:24px;
    font-weight:lighter;
    padding-left: 30px;
}