다른 요소 위에있는 요소의 배경 이미지

목표는 div # 슬라이더 요소의 backgroung-image 위에 "a"요소의 배경 이미지를 렌더링하는 것입니다. http://jsfiddle.net/zorza/drBBC/11/다른 요소 위에있는 요소의 배경 이미지

내가 상대 "리"내부의 "A"요소의 절대 위치와 시도 :

<div id="top_bg"> 
    <div id="top"> 
     <nav> 
      <ul> 
       <li><a href="#">Link onegfdgdfg gd</a></li> 
       <li><a href="#">Link two</a></li> 
       <li><a href="#">Link three</a></li> 
       <li><a href="#">Link four</a></li> 
       <li><a href="#">Link five</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

<div id="slider"> 
</div>

jFiddle 링크이 내 시도를 포함 모든

첫째, 여기에 코드입니다 Z- 인덱스를 줄 수있는 방법을 제공하므로 # 슬라이더 위에 나타날 수 있습니다. 거의 작동하지만, "li"이 내부에 "a"를 위치 시키려면 일정한 너비를 가져야합니다. 내부 텍스트가 일정한 너비보다 넓은 경우 (첫 번째 메뉴 항목 참조) 나쁜 결과를 가져옵니다.

내가 얻고 자하는 것은 내부 텍스트에 따라 자체 너비를 설정하고 "li"요소의 일정한 너비를 없애기 위해 메뉴 항목 사이의 간격이 될 "a"요소입니다. 조차.

두 번째 방법은 #slider 배경을 두 개의 그래픽으로 슬라이스하고 #top div 배경 이미지 내부에 화살표 중 하나를 배치하는 것입니다. 이런 식으로 "a"요소는 절대적으로 배치 될 필요가 없습니다. 그러나이 솔루션은 이미지를 바꿀 필요가있을 때 모든 종류의 문제를 일으키지 않습니다.

출처

2013-03-11 zorza

#top-bg{ 
    background-image:url('yourImage.png'); 
}

이렇게하면됩니다. div # 배경이 필요 없습니다.

편집이 시도 :

a:hover :after{ 
    width:0; 
    height:0; 
    content:''; 
    border:10px solid transparent; 
    border-top-color:#333333; 
    position:absolute; 
    top:100%; 
    left:49%; 
}

내가 그 일을한다고 생각합니다. 이미지를 추가하지 않고 아이템의 폭, 새로운 요소를 배치하고

출처

2013-03-11 20:06:31 sourRaspberri

원할 경우 로고를 사용하여 동일한 작업을 수행 할 수 있습니다. @zorza – soyuka

처음부터 내 사이트의 전체 헤더를 구조화하고 위치를 지정해야하므로 피하고 싶습니다. 페이지의 구조는 jFiddle 예제 (실제 사이트 : http://interclick2.home.pl/fiddle/1/index.php)보다 약간 더 복잡합니다. 기존 마크 업과 함께이 작업을 수행 할 방법이 없습니까? – zorza

글쎄, 'z-index'는 JS 바이올린에서 작동하지 않습니다. 나는 당신이 원하는 것을 완전히 확신하지 못합니다. 이미지를'a' 엘리먼트 아래에 위치 시키길 원합니까? – sourRaspberri

당신이 봤어 앵커를 재배치하지 않고는

li, a { 
display: /*block or inline-block depending on the layout you were after*/ 
}

과

a { 
width: auto; 
}

에 자동 폭 모두 같은 크기로

출처

2015-03-07 01:53:07 Gl1tch3t

다른 요소 위에있는 요소의 배경 이미지

답변

관련 문제