2012-05-19 3 views
15

를 사용하여 내 헤더의 HTML 스크립트입니다 :CSS 링크 클릭 할 수 없습니다 여기에 절대 위치

<div class="header"> 
<div class="logo"><a href="Default.aspx"><img src="style/images/logo.png" alt="" /></a></div> 
<div class="toplink"><a href="Signin.aspx">Sign in</a></div> 
<div class="search"> 
    <form class="searchform" runat="server" method="get"> 
     <input type="text" id="s" name="s" value="Search for photos" onFocus="this.value=''" onBlur="this.value='Search for photos'"/> 
    </form> 
</div> 
</div> 

그리고 여기에 CSS 스크립트입니다 :

.logo { 
    padding: 30px 0; 
} 

.logo img { 
    display: inline; 
} 

.toplink { 
    position: absolute; 
    bottom: 40px; 
    right: 280px; 
    font-size: 14px; 
} 

.search { 
    position: absolute; 
    bottom: 10px; 
    right: 0; 
    font-size: 14px; 
    width: 330px; 
} 

어떻게 든 로그인 링크 ISN 클릭 할 수 없지만 절대 위치를 제거하면 정상적으로 작동합니다. 여전히 위치를 유지하면서 링크가 작동하도록 만들 수 있습니까? 어떤 제안이라도 감사 드리며 사전에 감사드립니다.

-Edit- 다른 곳에 문제가 있음이 드러납니다. 사실 masterpage를 사용하고 있으며이를 사용하여 기본 ASP 페이지를 만들었습니다. 이 문제는 master 페이지를 만드는 데 사용한 HTML 파일이 아니라 ASP 페이지를 테스트 할 때만 발생합니다. 미안하지만 내가 복잡하게 들린다면 그래, 문제는 나에게 복잡하다. 잘만되면 누군가 나를위한 이유를 지적 할 수 있습니다.

+3

방금 ​​테스트 한 결과, 클릭 할 수 있습니다! 나머지 코드와 관련하여 더 많은 정보를 제공해야합니다! 문제는 귀하가 갖고있는 질문에서 비롯된 것이 아닙니다! – Zuul

+0

테스트 한 broser/os 목록도 포함시켜야합니다. 특히 zuul의 의견이 주어진다면 이것들의 고유 한 조합으로 제한 될 수 있습니다. –

+0

http://jsfiddle.net/Wh2sK/ - 나를 위해 일합니다. –

답변

51

z-index:10;-.toplink{...} 클래스를 추가하십시오.

+0

완벽하게 작동합니다! 고마워요! –

+2

에'z-index'를 지정하면 레이어 레이아웃이 지정됩니다. 그것은 이런 것입니다. 요소는'z-index : x '를 가진 요소의 맨 위에 있고'z-index : (greater then x)'를 가진 요소의 뒤에 위치한다. 나는 네가 이해하도록하기 위해 성공했기를 희망한다. –

+0

설명 주셔서 감사합니다! 나는 바보 같은 질문에 신경 쓰지 않기를 바란다. 그러나 나는 toplink 클래스에 z-index 값을 설정하기 전에 어떤 요소가 하이퍼 링크 위에 머물러 있는지 궁금해하고있다. –