Легкая задача z-index: заставить родного брата исчезнуть за другим родным братом?

0

Вот что я хочу, чтобы он выглядел так:

Изображение 174551

все, что находится внутри красного div, должно идти за зеленым div. Html:

<div style="height: 100px">some text blablablablablablabla
    <br/>some text blablablablablablabla
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>
</div>
<nav class="navigation">
    <div class="navfake"></div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title1</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title2</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
</nav>

CSS до сих пор и, к сожалению, не работает:

nav {
    width: 100%;
    height: 60px;
    position: relative;
}
.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
}
.singleelement {
    display: inline-block;
    width: 100px;
    height: 60px;
    text-align: center;
    z-index: 0;
}
.container {
    position: absolute;
    top: 0px;
     -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease;
        transition: all .8s ease;
    height: 200px;
}
.titlepicture {
    width: 100%;
    height: 200px;
    background-color: red;

}


.singleelement:hover .container {
    top: -80px;

}

введите ссылку здесь

Теги:

2 ответа

1
Лучший ответ

Кредиты также за: @Тоскан, спасибо

ДЕМО-РАБОТА

Здесь новый css

 nav {
    width: 100%;
    height: 60px;
    position: relative;
}
.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
    position:relative;
}
.singleelement {
    display: inline-block;
    width: 100px;
    height: 60px;
    text-align: center;
}
.container {
    position: absolute;
    top: 0px;
     -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease;
        transition: all .8s ease;
    height: 200px;
}
.titlepicture {
    position:absolute;         /*THIS ADDED*/
    width: 100%;
    height: 200px;
    background-color: red;
    z-index:1;            /*THIS ADDED*/
}


.singleelement:hover .container {
    top: -80px;

}

.title{                         /*THIS ADDED*/
    z-index:555; 
    position:relative;

}

HTML:

<br><br>
<div style="height: 100px">some text blablablablablablabla
    <br/>some text blablablablablablabla
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>
</div>
<nav class="navigation">
    <div class="navfake"></div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title1</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title2</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
</nav>
Поделиться
  • 0
    проблема в том, что теперь красный цвет стоит позади всего, включая текст над ним. Это должно быть позади зеленого, но перед материалом, который идет так красиво "некоторый текст blablablablablablabla некоторый текст blablablablablablablabla некоторый текст"
  • 1
    Я исправил это, jsfiddle.net/8hVWz/1 обновил ваш ответ, и я мог бы принять его. У вас были некоторые недостатки в CSS, который вы предоставили. Например, .title ничего не делает, если он не является абсолютным, относительным или фиксированным
Показать ещё 2 комментария
1

http://jsfiddle.net/hL5gW/4/

Добавление абсолютной позиции и выполнение некоторого позиционирования это невероятно просто.

Я добавил эти стили во второй элемент. Вам просто нужно добавить его в отдельный класс для второго элемента или просто добавить его в singleelement если вы хотите, чтобы это применимо к обоим.

 <div class="singleelement" style="z-index:-100;position:absolute;margin-top:-60px;">
Поделиться
  • 0
    какого чёрта это работает с абсолютной позицией?
  • 0
    Это все волшебство для меня ... Я просто немного искал и пока не получил четкого ответа. Но я делал это раньше, и это работает. :)
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню