CODEWITHSUNDEEP
htmlcss
Yiyue Wang
Yiyue Wang

Reputation: 152

Overlap an element over another element

I'm trying to make such a stuff enter image description here

But somehow I got something like the one below(Please ignore the color, font family for now) enter image description here

My code is 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;
}

Upvotes: 1

Views: 1051

Answers (3)

Felix A J
Felix A J

Reputation: 6470

One suggestion is to use :after for the border.

.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;
}
<div class="box">
<p>Instagram Photo</p>
</div>

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

Upvotes: 1

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

I tried to make it exactly like the image you put. Whenever you want to put an HTML element above or beneath another element, use the z-index property. The more the value of the z-index, it will be more on the above, and vice versa

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

Upvotes: 1

m4n0
m4n0

Reputation: 32255

Change position: static to position: relative for the box.

CSS-Tricks reference

z-index only effects elements that have a position value other than static (the default).

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

Upvotes: 2

Related Questions