다른 요소에 대한 JQuery의 상대 위치 지정

Question

<div class="bgdiv"></div> 
<div class="fgdiv"></div> 

<a href="#" class="mainlink">LINKA</A> 

bgdiv에는 스타일이 없으므로 ZIndex를 할당해야하며 다른 요소는 이미 z- 인덱스 속성을 가지고 있어야하며 그 다음에 높이와 너비를 할당해야합니다.

그러면 bgdiv가 링크 A 뒤에 있고 fgdiv 앞에 위치하여 bgdiv이 링크를 직접 둘러 쌈 (시각적으로)하고 패딩과 유사한 효과가 나타납니다.

누군가 달성 할 수있는 아이디어가 있습니까?

편집 : 난 그냥 로그인 버튼을 클릭 한 것처럼

그래서 위의 이미지입니다. 회색 직사각형 링크 뒤에있는 녹색 막대 div는 이제 "레이어 위로 이동했지만"여전히 텍스트 "로그인"뒤에 있습니다.

Answer 1

한 개의 평평한 배경 이미지 (녹색 막대 및 사각형 모두를 고려하십시오. 동일한 이미지). 결합 된 배경 이미지를 4 개로 잘라냅니다 (또는 단일 스프라이트를 사용하는 것이 더 좋습니다).

기본적으로 각 색상 (따라서 4 개)에 '켜짐'및 '꺼짐'상태가 필요합니다. 그런 다음 각 클래스를 별도의 CSS 클래스 (.gray-on, .gray-off)에 할당하고 각 a 요소의 클래스를 토글 할 수 있습니다.

예를 들어, 회색 BG 이미지는 다음과 같이 보일 것이다 :

Answer 2

내가 여기 http://jsfiddle.net/sgamt/있어하지만 난 정말 싫어합니다.