이미지 위에 상자 그림자가 있습니까?

바이올린 : http://jsfiddle.net/G5FaQ/이미지 위에 상자 그림자가 있습니까?

이미지가 div에 있습니다. 이미지 바로 옆에있는 div에는 상자 그림자가 있습니다. div의 상자 그림자가 이미지와 겹쳐지기를 원합니다. 그래서 이미지가 div의 일부분 인 것처럼 보입니다. 이상하게 그 위에 놓여있는 것처럼 보이지 않습니다. 당신이 바이올린에서 볼 수 있듯이 Z- 인덱스를 시도했지만, 실패한 것 같습니다.

HTML :

<body> 

<nav id="navigation"> 
    <img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo"> 
</nav> 

<div id="content_wrapper"> 
<!-- InstanceBeginEditable name="content" --> 
<section id="content"> 
    Content. 
</section> 
<!-- InstanceEndEditable --> 
</div> 

</div> 
</body>

CSS :

body { 
    background: #ffd288;  
} 

/*Nav*/ 
#navigation { 
    width:100%; 
    z-index: 10; 
} 

.logo { 
    z-index: 1; 
} 

/*Content Section*/ 
#content { 
    background: #393951; 
    height: 2000px; 
    z-index: 10; 
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8); 
     -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8); 
      box-shadow: 0px 0px 20px rgba(0,0,0,.8); 
}

출처

2013-09-24 fildred13

거의 들었습니다! 컨테이너에 절대 위치 또는 상대 위치를 추가하기 만하면됩니다! 컨테이너를 일반 DOM 요소처럼 작동 시키려면 상대적인 위치에 두거나, 자유롭게 떠 다니려면 절대 위치로 설정하십시오.

position:relative;

http://jsfiddle.net/G5FaQ/1/

행운을 빌어 요 당신은 다른 질문 :

출처

2013-09-24 16:42:12

나는 할 수있을 때 이것을 받아 들일 것이다. n 먼저. 또한, 긍정적 인 태도 :). 그래도 brbcoding 덕분입니다. 내가 어리 석다고 믿을 수 없어. – fildred13

오, 나는 brcoding이 10 초 정도 전에 나에게 들어 왔다고 생각해. :) 고마워! –

는 그 z-index를 사용하는 요구 사항입니다 ... 위치의 어떤 종류의 당신의 #navigation ID를 부여 ..

#navigation { 
    position: absolute; 
    width:100%; 
    z-index: 10; 
}

DEMO

출처

2013-09-24 16:41:55 brbcoding

당신은 콘텐츠 사업부에

position: absolute;

를 사용하여 마우스 오른쪽을 사용하여 관리 할 수있는 경우 알려주세요 왼쪽 ..

출처

2013-09-24 16:48:13

이미지 위에 상자 그림자가 있습니까?

답변

관련 문제