CODEWITHSUNDEEP
jqueryhtmlcssline
code-8
code-8

Reputation: 58810

How can I place a line behind my divs?

I want to move place my dashed line behind my divs. It keep staying on the top of my divs.

Here what I currently have right now :

enter image description here

Here what I am hoping to get :

enter image description here

**CSS** 

/*Background Border*/
.border-center {
  width: 100%;
  position: relative;
}

.slide:before {
  content: '';
  position: absolute;
  border-bottom: 3px #3498db dashed;
  z-index: 1;
  top: 50%;
  margin-top:-2px;
  right: 10%;
  left: 40%;
  width: 25%; 

}

I wish I can put more code, since my rep is low, I got this warning :

enter image description here

More details : JSFiddle

Upvotes: 0

Views: 81

Answers (2)

Abdul Ahmad
Abdul Ahmad

Reputation: 10019

giving your fiddle a z-index of 0 accomplished this, and a background:white on your .tl-box

http://jsfiddle.net/1q6ur85k/2/

Upvotes: 1

Bill Criswell
Bill Criswell

Reputation: 32941

In short, the z-index of the boxes need to be higher than the lines and the boxes need to have a background color of white to keep the line from showing through.

Here it is done very roughly: http://jsbin.com/tupiqiqida/1/edit?html,css,output

Upvotes: 0

Related Questions