Html 将一个元素重叠在另一个元素上

我想做这样的东西

但不知怎的，我得到了下面的东西（请暂时忽略颜色、字体系列）

我的密码是。 HTML:

---

将框的

位置：静态

更改为

位置：相对

z索引仅影响具有位置值而不是 静态（默认设置）

.box{
背景色：红色；
宽度：60%；
左缘：20%；
高度：30px；
z指数：3；
位置：相对位置；
}
.方框p{
文本对齐：居中；
颜色：白色；
线高：30px；
}
人力资源{
边框顶部：1px纯红；
边框底部：1px纯蓝色；
z指数：-1；
利润上限：-15px；
位置：静态；
}

Instagram照片

将框的

位置：静态

更改为

位置：相对

z索引仅影响具有位置值而不是 静态（默认设置）

.box{
背景色：红色；
宽度：60%；
左缘：20%；
高度：30px；
z指数：3；
位置：相对位置；
}
.方框p{
文本对齐：居中；
颜色：白色；
线高：30px；
}
人力资源{
边框顶部：1px纯红；
边框底部：1px纯蓝色；
z指数：-1；
利润上限：-15px；
位置：静态；
}

Instagram照片

我试着让它和你放的图像一模一样。 无论何时要将HTML元素放在另一个元素的上方或下方，请使用

z-index

属性。

z-index

的值越大，上面的值就越大，反之亦然

.box{
背景色：#F8931F；
位置：绝对位置；
宽度：200px；
文本对齐：居中；
颜色：#fff；
填充物：5px；
文本转换：大写；
左：50%；
顶部：40px；
转换：转换（-50%，0）；
}
.分离器{
宽度：100%；
高度：2倍；
位置：绝对位置；
背景色：#F8931F；
顶部：52px；
z指数：-1；
}

instagram照片

我试着让它和你放的图像一模一样。 无论何时要将HTML元素放在另一个元素的上方或下方，请使用

z-index

属性。

z-index

的值越大，上面的值就越大，反之亦然

.box{
背景色：#F8931F；
位置：绝对位置；
宽度：200px；
文本对齐：居中；
颜色：#fff；
填充物：5px；
文本转换：大写；
左：50%；
顶部：40px；
转换：转换（-50%，0）；
}
.分离器{
宽度：100%；
高度：2倍；
位置：绝对位置；
背景色：#F8931F；
顶部：52px；
z指数：-1；
}

instagram照片

一个建议是使用

：after

作为边界

.box{
高度：30px；
z指数：3；
位置：静态；
}
.方框p{
背景色：红色；
文本对齐：居中；
颜色：白色；
线高：30px；
保证金：0；
左缘：20%；
宽度：60%；
}
.盒子：之后{
边框顶部：1px纯红；
边框底部：1px纯蓝色；
内容：''；
显示：块；
z指数：-1；
顶部：-15px；
位置：相对位置；
宽度：100%；
高度：0px；
}

Instagram照片

一个建议是使用

：after

作为边界

.box{
高度：30px；
z指数：3；
位置：静态；
}
.方框p{
背景色：红色；
文本对齐：居中；
颜色：白色；
线高：30px；
保证金：0；
左缘：20%；
宽度：60%；
}
.盒子：之后{
边框顶部：1px纯红；
边框底部：1px纯蓝色；
内容：''；
显示：块；
z指数：-1；
顶部：-15px；
位置：相对位置；
宽度：100%；
高度：0px；
}

Instagram照片

<div class="box">
    <p>Instagram Photo</p>
</div>
<hr>

.box{
     background-color:red;
     width:60%;
     margin-left:20%;
     height:30px;
     z-index:3;
     position:static;
}
.box p{
    text-align:center;
    color:white;
    line-height:30px;
}
hr {
    border-top: 1px solid red; 
    border-bottom: 1px solid blue; 
    z-index:-1;
    margin-top:-15px;
    position:static;
}