2009-05-29 3 views
13

페이지에 두 개의 레이어가있는 경우 첫 번째 레이어의 두 번째 레이어가 겹치는 두 번째 레이어로 가로 질러 나눠서 "클릭 연결"할 수 있습니까?layers/div를 통해 클릭

두 번째 레이어가 겹치는 첫 번째 레이어에 링크가있어서 링크를 클릭 할 수 없게됩니다. 레이어를 표시 할 수있는 방법이 있나요? 클릭 만하면되지만 링크를 클릭 할 수 있습니까?

편집 :

다음은 HTML 및 스타일 시트의 예입니다.

테스트 링크는 Layer3의 헤더와 인라인 될 때 ​​끊어지지 않지만 아래에서는 괜찮습니다. 이 문제를 해결할 수있는 방법이 있습니까?

<title>Test</title> 
<link rel="stylesheet" href="test.css" type="text/css"> 
<body> 
<div id="Layer0"> 
<div id="Layer1" class="Layer1"> 
<h3 align="left">Brands</h3> 
</div> 
<div id="Layer2" class="Layer2"><h1>TEST</h1> 
<div id="rightlayer"> 
<a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
</div> 
</div> 
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1> 
</div> 
</div> 
</body> 
</html> 

그리고 CSS 몇 가지 코드를 보지 않고 이야기하기 어렵다

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    position:absolute; 
    left:10px; 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
position:absolute; 
top:67%; 
padding:20px; 
width: 100%; 
} 

답변

5

- 단지 "정상" 레이어를 클릭 할 수 있습니다. 부록 포스트 OP 편집


: 당신이 당신의 "레이어"를 주면 더 쉽게 시각화 할 수 많은 다른를 div를

생각해 CSS 레이아웃의 물리적 종이 조각 작업 것처럼 (이입니다 배경색). 렌더링 엔진은 찾은 각 요소에 대해 사용자가 지정한 크기의 용지를 잘라냅니다 (또는 제대로 작동합니다). 이 작업은 페이지의 각 비트를 페이지에 놓는 순서대로 수행됩니다. 마지막 항목이 맨 위에 표시됩니다.

이제 렌더링 엔진에게 세 번째 div를 두 번째 겹치는 위치에 놓으라고 말했습니다. 그리고 지금 당신은 덮여있는 내용을 "볼"수 있기를 기대합니다. 종이로는 작동하지 않으며, HTML에서는 작동하지 않습니다. 투명하기 만하다가 공간을 차지하지 않는다는 것을 의미하지는 않습니다.

그래서 뭔가를 변경해야합니다.

당신의 CSS 마크 업을 보면 쉽게 승리 몇 가지 방법입니다 (정직하게 정리 될 수있다,하지만 난 가정합니다 당신이 그것을 정당화하는 우리를 표시하지 않는 다른 마크 업있다) :

은 1). Z- 색인을 Layer3에 -1로 설정 - z- 색인은 계층화 순서를 기본 (계층 적으로)에서 변경할 수있는 방법입니다. 이렇게하면 레이어 3 전체가 나머지 페이지 아래로 이동하므로 숨겨진 내용이 노출되지만 내용에 따라 그 반대가됩니다.

2). 폭을에서 100 %로 변경하십시오. pos : abs 설정 왼쪽 : 0px 및 오른쪽 : 199px; (필자는 Layer2에서 패딩을 의도 한 열 너비라고 생각합니까?). 이 비용은 귀하의 Layer3이 더 이상 100 % 너비가 아닙니다.

3). Google "CSS 열 레이아웃" 그리고 필요한 것을 반영하고 패턴을 적용하는 패턴을 찾으십시오. 할 수있는 모든 CSS 레이아웃은 이미 백만 번 완료되었습니다. 문제를 해결하는 표준 기술이 있습니다. 경험을 쌓지 않았다면 CSS는 어렵습니다. 그래서 다른 사람들의 경험을 활용하십시오. 바퀴를 다시 열지 마십시오.

0

.

아래쪽 레이어에 z- 인덱스를 설정해 볼 수도 있지만 절대, 상대 또는 위치 (위치 : 절대)로 배치 된 요소에서 작동합니다.

위치를 추가합니다 :


편집 코드를보고 난 후에 상대; z- 색인 : 100; ~ #LayLayer.

너비 : 100 % .Layer3에서 제거 할 수 있습니다.


코드를 리팩토링하고 #rightLayer 및 .Layer3에 대한 2 열 레이아웃으로 이동할 수 있습니다.

CSS

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
} 

HTML

당신이, Y, (가장 중요) Z div의 자신의 현재 X에 체류 할 경우이 불가능
<div id="Layer0"> 
    <div id="Layer2" class="Layer2"> 
     <h1>TEST</h1> 
    </div> 
    <div id="Layer1" class="Layer1"> 
     <h3 align="left">Brands</h3> 
    </div> 
    <div class="content"> 
     <div id="rightlayer"> 
      <a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
     </div> 
     <div id="Layer3" class="Layer3"> 
      <h1>Ed Hardy Auctions</h1> 
     </div> 
    </div> 
</div> 
+0

실제 페이지의 링크가 페이지 중간에 위치하므로 너비를 제거 할 수 없습니다. 나는 당신이 제안하는대로 시도 할 것입니다. 감사합니다. –

+0

아, 위치로 변경 : 상대 레이어로 페이지 아래로 너무 멀리 이동. 그걸 막을 수있는 방법이 있습니까? –

4

거대한 작업이지만 가능한 일입니다.
최상위 레이어/div에서 click 이벤트를 캡처하고 커서 x-y 위치를 찾아야합니다.
그런 다음 최상위 레이어 아래에있는 layer/div에있는 모든 링크를 찾아 화면상의 위치가 현재 마우스 위치를 벗어나는 지 확인하십시오.
그런 다음 일치하는 링크의 클릭을 트리거 할 수 있습니다.
jQuery (아직 사용하지 않은 경우)를 사용하고 문제가 발생하면 jQuery 태그로 다시 게시하십시오.

+1

맘모스가 아니라고 생각합니다. jQuery의 offset(), width() 및 height()를 사용 하시겠습니까? – Nosredna

+0

아니요, 전혀 큰 일이 아니며, 이것이 정확하고 유일한 접근법입니다. – Owen

0

나는 rightlayer의 링크가 클릭해야하는 유일한 링크이고 다른 레이어의 링크가 없다고 가정합니다. 그렇다면 div의 z- 인덱스 순서를 변경하여 문제를 해결할 수 있습니다.

레이어 1과 레이어 3은 위치 절대 값을 갖기 때문에 레이어 2에 위치 스타일 (절대 또는 상대)을 추가하면 오른쪽 div를 당겨 해당 div를 앞으로 당길 수 있습니다. Layer3.

나는하여 CSS에 다음과 같은 추가 : 그 현재 페이지 설정을 그것이 다만 방법 나뭇잎 볼 수있는에서

#Layer2 {  
    position: relative; 
    z-index: 1; 
} 

을하지만, (링크와 rightlayer 포함) 모든 요소를 ​​가져옵니다 정면이므로 모든 링크를 클릭 할 수 있습니다.

디버깅을 위해 다른 레이어의 z- 인덱스 순서에 대한 아이디어를 얻기 위해 모든 다른 레이어에 배경색을 추가하는 것이 좋습니다. 배경 색상을 사용하면 링크에서 떨어지는 레이어를 쉽게 찾을 수 있었지만 새로운 z- 인덱스 순서로 링크를 사용할 수 있는지 확인할 수있었습니다.

희망이 도움이됩니다.

0

몇 년 전에 Firefox Bugzilla에 버그를 제출하여 Firefox에이 버그가 있음을 알 렸습니다.

Mozilla 엔지니어가 실제로 버그가 아니며 HTML/CSS 사양에 따라 올바른 동작을한다고 들었습니다. 불행히도 나는 약 6 년 전처럼 원래의 버그를 찾을 수 없습니다.

내가 버그를 제출 한 이유는 IE를 사용할 때 아래 링크를 클릭 할 수 있었기 때문이었습니다 (Firefox 6은 생각합니다)하지만 Firefox는 허용하지 않았습니다.

평상시와 마찬가지로, IE의 잘못된 구현이 있었고 Firefox가 사양대로 작동하고있었습니다.

div가 투명하기 만해도 클릭 할 수 있어야한다는 의미는 아닙니다.

JavaScript 또는 CSS로 어떻게 해결할 수 있는지 잘 모르겠습니다. 나는 한 발 뒤로 물러나서 당신이 성취하고자하는 것과 그것이 성취하려는 방법에 대해 다시 생각해 볼 것입니다. (- : .Layer3에서 100 % 바로 폭을 삭제 즉 절대 위치에 대한 기본)

그렉

0

당신은 단순히 자동차에 DIV의 폭을 설정할 수 없습니다.

그런 식으로 div는 불필요하게 링크를 겹치지 않고 필요한만큼만 확장됩니다.

28

생각 나는 이것을 몇 시간 동안 고민하고 해결책을 찾았다 고 생각하면서 이것을 업데이트 할 것이다. Jquery를 사용했지만 CSS 속성을 살펴 보았습니다.

pointer-events:none; 

... 내가 원했던 그대로였습니다.

+0

광범위하게 사용하지는 않지만 Chrome 확장 기능에서 완벽하게 작동합니다 (크롬이 완벽하게 지원하므로). 그 중 하나에 대한 감사의 힙 –

+0

주의 사항 : (호버 효과와 같은) 다른 동작도 중단됩니다. –

+1

도 IE 나 Opera의 최신 버전에서는 작동하지 않습니다. – Andre