Почему background-color красит не только эл-т которому назначен, но и эл-ты поверх него?

Atljh0987 · November 25, 2016

.down со свойством background-color красит надвинутый на него элемент .up__foot с картинкой, почему так происходит? вот код:

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
    <div class="up">
        <div class="wrap">
            <div class="up__head"></div>
            <div class="up__foot"></div>
        </div>
    </div>
    <div class="down">
        <div class="wrap">
            <div class="footer"></div>
        </div>
    </div>
</body>
</html>

CSS

html, body{
    width:100%;
    height:100%;
    padding:0; margin:0;
}
 
.wrap{
    min-width:500px;
    max-width:70%;
    height:100%;
    margin:0 auto;
}
 
 
.up{
    min-width:592px;
    max-width:70%;
    background:gray;
    height:50%;
    margin:0 auto;
}
 
.head{
    width:500px;
    height:50%;
}
 
.up__head{
    width:100%;
    height:100px;
    background-color:#616262;
    margin-bottom:200px;
}
 
.up__foot{
    background-image:url(../img/lead.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    height:325px;
    width:100%; 
}
 
.down{
    min-width:592px;
    max-width:70%;
    height:50%;
    margin:0 auto;
    background-color:blue;
}

spartak9871 · November 25, 2016

"на него элемент .up__foot" или под него?

самое простое решение от новичка z-index

Edited November 25, 2016 by spartak9871

Atljh0987 · November 25, 2016

4 минуты назад, spartak9871 сказал:

"на него элемент .up__foot" или под него?

самое простое решение от новичка z-index

Пробовал, нооо нет. .up__foot и так лежит выше него

spartak9871 · November 25, 2016

.up__foot{position: relative;}

radioactive · November 25, 2016

.up{
	position: relative;
	z-index: 2;
}
.down{
	position: relative;
	z-index: 1;
}

если не помогло то рабочий пример в студию

ссылку на сайт либо сюда https://jsfiddle.net/

Edited November 25, 2016 by radioactive

Rumpelstistskin · November 25, 2016

ну так в потоке HTML-файла выше отображается тот слой, который ниже по документу. решается z-index-сами. при том, z-index нужно выставлять div.up или отрицательный div.down. Потому что div.up__foot и div.down находятся в разных потоках.

http://htmlbook.ru/samlayout/blochnaya-verstka/nalozhenie-i-poryadok-sloev

Рабочий пример:

https://jsfiddle.net/obma4tem/

Edited November 25, 2016 by Rumpelstistskin

Sign In

Почему background-color красит не только эл-т которому назначен, но и эл-ты поверх него?

Question

Atljh0987

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

spartak9871

Link to comment

Share on other sites

Atljh0987

Link to comment

Share on other sites

spartak9871

Link to comment

Share on other sites

radioactive

Link to comment

Share on other sites

Rumpelstistskin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information