위치와의 충돌 문제 : 상대적;

최근 MyBB 용으로 디자인 된 템플릿을 편집했습니다. 다행히도, 나는 그것이 내가 그것을 기대했던 정확하게 방법을 만들었다. 그러나 탐색 바는 부서진 것처럼 보였다. 탐색을 시도한 후에는 탐색의 아래쪽 절반 만 클릭 할 수 있음을 알았습니다. http://gyazo.com/99337bd5252b37e118ce119d5168bcf3 빨간색 상자를 그린 위치를 볼 수있는 것처럼 링크 활성화가 작동하는 유일한 곳입니다. 약 2 시간 후에 나는 내 문제가 "위치 : 친척"때문인 것으로 알았다. 제거 할 때 탐색은 정상적으로 작동하지만 패널 div가 오른쪽에서 다른 위치로 이동합니다.위치와의 충돌 문제 : 상대적;

<div class="main-bg"> 
<div class="main-width"> 

    <a name="top" id="top"></a> 

    <div class="top-bar blue-texture"></div> 

    <div id="header"> 


     <div id="panel"> 
{$welcomeblock} 
     </div> 


     <div class="logo" > 
     <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" /></a> 
</div> 
     <hr class="hidden" /> 
    </div> 
    </div> 
    </div> 
    <div id="container"> 
<div class="bg-img"> 
</div> 
    <hr class="hidden" /> 

    <div class="menu blue-texture"> 

      <span class="search"> 
    <form action="search.php" method="post"> 
     <input type="hidden" name="action" value="do_search" /> 
     <input type="hidden" name="postthread" value="1" /> 
     <input type="hidden" name="forums" value="all" /> 
     <input type="hidden" name="showresults" value="threads" /> 
     <input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" /> 
     <input type="submit" value="Go" class="search-button" title="Search the forums" /> 
    </form> 
      </span> 

    <ul> 
     <li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li> 
     <li><a href="{$mybb->settings['bburl']}/page.php?page=tournaments">Tournaments</a></li> 
    </ul> 
    </div>

어떻게 개발했는지에 대한 전체 코드가 있습니다. 그러나 문제는 주로 CSS에 있습니다.

#header { 
    padding: 60px 0 85px; 
    height: 56px; 
    text-align: left; 
    position: relative; 
} 

#panel { 
    background: rgba(0,0,0,0.4); 
    color: #fff; 
    border: 1px solid #07090b; 
    border-radius: 6px; 
    position: absolute; 
    top:0; 
    margin-top: 0px; 
    right: 0; 
    padding-top: 4px; 
    font-size: 12px; 
    padding-right: 12px; 
    padding-left: 12px; 
    height: 130px; 
    } 
.menu { 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border: 1px solid #174d7b!important; 
    height: 50px; 
    }

위치를 추가 할 방법이 없기 때문에 문제를 해결할 방법을 찾을 수 없습니다. 탐색 링크가 원래 의도대로 작동하게하십시오.

.menu { width: 100%; } 
.menu ul li a { display: inline-block; width: auto; float: left; }

희망이

출처

2014-09-26 RJC

내가'DIV 번호를 생각하는 데 도움이 : 실제 링크 나 작업없이 – OxyDesign

더 많은 CSS가 도움이 될 것입니다 – Oberst

피들이 도움이 될 것입니다. –

는 문제를 찾기 어려울 수 있지만, 문제를 해결할 수도 있습니다 CSS를 시도하십시오 것 니펫을 header '가`ul`을 넘었지만 실제 또는 더 완전한 html/css로 테스트해야합니다. Chrome 개발자 도구 (F12)로 확인하고 'div # header'를 검사하여 종료 지점을 확인할 수 있습니다.

출처

2014-09-27 01:18:33 emmanuel

위치와의 충돌 문제 : 상대적;

답변

관련 문제