Div border cut off when behind another div - css

Question

I am having trouble getting the top of the border to show up of a div that is behind another div. It is currently cut off, but I'd like to get it to show behind the skills tag. Is this possible? Thank you!!
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}

Answer 1

I'd like to get it to show behind the skills tag. Is this possible?
The z-index property specifies the order of an element as they appear in the DOM (with the lowest element down at the same hierarchy level always appearing on top). When elements overlap, the z-index value determines which one covers the other. z-index only effects elements that have a position value other than the default value. To create the affect you're wanting, you need to add a lesser z-index value to #skills, like this:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: -2;
}
Or change the z-index value of #box from -1 to 1. Here's a fiddle example for you to review. http://jsfiddle.net/yongchuc/dconymaf/

Answer 2

your #skills element does not have the z-index property set, meaning it will default to auto, which will check the parent element's z-index to calculate it, My advice would be to set both elements index to be sure:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: 0;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}