與位置相沖突的問題：相對;

我最近編輯了爲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; 
    }

我找不到解決問題的方法，因爲沒有辦法添加位置：relative;並使導航鏈接仍然按照他們的意圖工作。

來源

2014-09-26 RJC

我想'DIV＃ header'已經超過'ul'，但我需要查看它是否真實或更完整的html/css來測試它。您可以使用Chrome開發人員工具（F12）進行檢查，然後檢查'div＃header'以查看它結束的位置。 – OxyDesign 2014-09-26 21:24:17

更多CSS將有幫助 – Oberst 2014-09-26 21:34:37

小提琴會幫助。 – 2014-09-26 21:36:37

沒有實際的鏈接或工作片斷這將是很難找到的問題，但請儘量將CSS可以解決你的問題：

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

希望這有助於

來源

2014-09-27 01:18:33 emmanuel

與位置相沖突的問題：相對;

回答

相關問題