CODEWITHSUNDEEP
htmlcss
Weblurk
Weblurk

Reputation: 6812

How can I hide a divs border behind another div with css?

I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.

Any ideas?

JSFIDDLE: http://jsfiddle.net/qs5xmege/1/

CSS and HTML

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
  <div class="border"></div>
  <div class="circle"></div>
</div>

Upvotes: 2

Views: 3463

Answers (4)

Rahul S
Rahul S

Reputation: 643

Try like this:

    .circle {
        background-color: #fff;
    border: 3px solid red;
    border-radius: 11px;
    display: block;
    height: 22px;
    margin: 0 auto;
    position: relative;
    top: -68px;
    width: 22px;
    }
.border {
    border-right: thin solid black;
    height: 100px;
    width: 50%;
}

Upvotes: 0

captainsac
captainsac

Reputation: 2490

Set position:relative of div circle and z-index:2 ie. 1 more than border is enough

.circle {
    background-color: #FFFFFF;
    border: 3px solid #FF0000;
    border-radius: 11px;
    height: 22px;
    margin: 30px auto 0;
    position: relative;
    width: 22px;
    z-index: 2;
}

Snippet

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  background-color: #FFFFFF;
  border: 3px solid #FF0000;
  border-radius: 11px;
  height: 22px;
  margin: 30px auto 0;
  position: relative;
  width: 22px;
  z-index: 2;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
  <div class="border"></div>
  <div class="circle"></div>
</div>

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

Add position:relative; to .circle.

z-index need relative, absolute or fixed vaue for position.

Upvotes: 0

Muhammet
Muhammet

Reputation: 3308

Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed 

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  position: relative;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
    <div class="border"></div>
    <div class="circle"></div>
</div>

Upvotes: 5

Related Questions