Question

我正在寻找在图像中创建类似这样的东西。我将使用什么CSS来做到这一点？

我只想在一个div标签中的页面顶部放置一个图像，并用红色条形框扩展dow n并与代表图像的蓝色条形框重叠。

Answer 1

如果要在同一行上显示徽标和导航，则应执行以下操作：

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;    
}

Answer 2

这是您要查找的代码：

.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 3

.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>

CSS重叠图片在另一个div标签之上

3 个答案: