CSS перекрывают изображение поверх другого тега div

Question

Я хочу создать что-то подобное на изображении. Какой CSS я бы использовал для этого?

Мне просто нужно изображение вверху страницы в одном теге div с красной полосой, которая расширяет значение dow n и перекрывает синюю полосу, представляющую изображение.

Answer 1

вот код, который вы ищете:

.navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-line-pack: baseline;
    align-content: baseline;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: relative;
}
.navigation > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    position: relative;
}
.navItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    position: relative;
}
.navItem.red {
    background: red;
    min-height: 2em;
}
.navItem.blue {
    background: blue;
    min-height: 20em;
}
.navItem.pinnedElement {
    position: absolute;
    top: 0;
    left: 18vw;
    min-width: 10em;
    min-height: 8em;
    max-height: 8em;
    z-index: 1;
    background: black;
}

<nav class="navigation">
    <ul>
        <li class="navItem"></li>
        <li class="navItem red"><a href="/" class="alink">&nbsp;</a></li>
        <li class="navItem blue"><a href="/" class="alink">&nbsp;</a></li>
        <li class="navItem pinnedElement"><a href="/" class="alink">&nbsp;</a></li>
        <li class="navItem"><a href="/" class="alink">&nbsp;</a></li>
    </ul>
</nav>

Answer 2

.red {
height:20px; width:300px; background-color:red;
}
.blue {
height:200px; width:300px; background-color:blue;
}
img {
    position: absolute;
    left: 50px;
    top: 7px;
    z-index: 1;
}

<div class="red"></div>
<div class="blue"></div>
<img class="image" src="https://placehold.it/80x100" height="100" width="80"/></div>

Answer 3

Если вы хотите, чтобы логотип и навигация находились в одной строке, вы должны сделать следующее:

HTML:

<nav class="navigation-bar">
<img class="logo" src="logo.png">
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Get in Touch</a>
</nav>

CSS:

 .navigation-bar {
    width: 100%;  /* i'm assuming full width */
    height: 80px; 
    background-color: red; 
}
.logo {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 15px;    
}
.navigation-bar > a {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    height: 80px;        
    line-height: 80px;    
}