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

Question

我正在尝试制作这样的东西

但不知怎的，我得到了类似下面的内容（请忽略颜色，现在的字体系列）

我的代码是here。 HTML：

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

CSS：

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

Answer 1

将position: static更改为position: relative框。

CSS-Tricks reference

  

z-index仅影响位置值不是的元素   static（默认值）。

.box {
  background-color: red;
  width: 60%;
  margin-left: 20%;
  height: 30px;
  z-index: 3;
  position: relative;
}
.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;
}

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

Answer 2

我试着让它与您放置的图像完全一样。 每当您想要将HTML元素放在另一个元素的上方或下方时，请使用z-index属性。 z-index的值越多，上面的内容就越多，反之亦然

.box{
    background-color: #F8931F;
    position: absolute;
    width: 200px;
    text-align: center;
    color: #fff;
    padding: 5px;
    text-transform: uppercase;
    left: 50%;
    top: 40px;
    transform: translate(-50%,0);
}

.seperator{
    width: 100%;
    height: 2px;
    position: absolute;
    background-color: #F8931F;
    top: 52px;
    z-index: -1;
}

<div class="box">instagram photos</div>
<div class="seperator"></div>

Answer 3

一个建议是使用:after作为边框。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/afelixj/nrEfm/50/