CSS 테두리가 배경 이미지 상단에 있습니다. (같은 div?)

Question

저는이 단순한 테두리가 설정된 높이의 div 위에 표시되도록 힘든 시간을 보냈지만 그럴 수는 없습니다. 나는 z-indexing과 ': after'를 체크 아웃했으나 아무것도 작동하지 않는 것 같습니다.

내용의 부모가이 :

.greycontent { 
position: relative; 
z-index: 1; 
height: 350px; 
background: url(images/stacked_circles.png) repeat; 
} 

: 내용은 다음 DIV 수준 "greycontent"로 가득

#content { 
    position: relative; 
    margin-left:auto; 
    margin-right:auto; 
    top: 50px; 
    width:800px; 
} 

(페이지의 중간에있을 내용을 설정) 배경 URL로 덮여있는 영역은 테두리를 포함하려고 시도합니다 (가장자리를 벗어남) :

.fill { 
    position:relative; 
    z-index: 2; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
} 

그냥 작동하지 않습니다. 내 설명이 명확하지 않은 경우이 이미지는 내가 전달하기 위해 노력하고있어 정리해야합니다

감사합니다!

JsFiddle

Answer 1

이 당신이 달성하려고 무엇입니까?

#content { 
    position: relative; 
    margin: 0 auto; 
    top: 50px; 
    width:800px; 
    overflow:hidden; 
    background:#ccc; 
    width:800px; 
} 
.greycontent { 
    position: relative; 
    z-index: 1; 
    height: 350px; 
    width:350px; 
    border:1px solid #fff; 
    background:#ccc; 
    margin:0 auto 60px; 
} 

jsFiddle은 jsFiddle 업데이트되었습니다.