在媒體查詢中用絕對定位一個元素

我在我的媒體查詢中定位了我從display: none更改爲的移動菜單圖像時出錯。我試圖讓圖像拍攝position:absolute，並且位於頁面的右上角top:30px和right:30px。出於某種原因，圖像出現在左側圖像（公司徽標）下。在媒體查詢中用絕對定位一個元素

有沒有人看到我做錯了什麼？

Click here to see a jsfiddle...adjust the screen size to under 640px

<div id="header"> 
    <div id="nav-inner"> 
     <div id="header-img"> 
      <a href="index"><img src="../images/psi.png"></a> 
     </div><div id="nav-container"> 
      <a class="ssm-toggle-nav" href="#" title="Open/close"><img src="images/menu-button.png" alt="Menu" id="menu-button"></a> 
      <nav id="nav-list"> 
      <ul> 
       <li class="nav-link"><a href="index">Home</a></li> 
       <li class="nav-link"><a href="#">Series</a></li> 
       <li class="nav-link"><a href="#">Why SI</a></li> 
       <li class="nav-link"><a href="#">About Us</a></li> 
       <li class="nav-link"><a href="#">FAQ's</a></li> 
       <li class="nav-link"><a href="testimonials">Testimonials</a></li> 
       <li class="nav-link"><a href="contact">Contact</a></li> 
      </ul> 
      </nav> 
     </div> 
    </div> 
</div> 

#header { 
    width: 100%; 
    height: 120px; 
    background: #FFF; 
    border-bottom: 2px solid #CDCDCD; 
    position: fixed; 
    z-index: 111; 
} 
#nav-inner { 
    width: 80%; 
    margin: 0 auto; 
    display: block; 
    position: relative; 
} 
#header-img { 
    width: 25%; 
    display: inline-block; 
} 
#header-img img { 
    height: 120px; 
    width: auto; 
} 
#menu-button { 
    display: none; 
    width: 30px; 
    height: 30px; 
    postition: absolute; 
    top: 50px; 
    right: 50px; 
    cursor: pointer; 
} 
#nav-container { 
    width: 75%; 
    display: inline-block; 
    position: relative; 
} 
#nav-list { 
    position: absolute; 
    top: 50%; 
    height: 120px; 
    margin-top: -60px; 
    text-align: right; 
    width: 100%; 
} 
.nav-link { 
    display: inline-block; 
    padding: 0 10px; 
} 
.nav-link a { 
    color: #009ED2; 
    font-size: 1.2rem; 
    font-family: 'Muli', sans-serif; 
    text-decoration: none; 
    position: relative; 
} 
.nav-link-active a { 
    padding-bottom: 10px; 
} 
.nav-link-active a:after { 
    content: ""; 
    width: 80%; 
    height: 3px; 
    background: #0f5233; 
    bottom: 0; 
    position: absolute; 
    left: 10%; 
} 

/*----------------------------------------------MEDIA QUERY 640--------------------------------------------*/ 

@media screen and (max-width:640px) { 

#header { 
    width: 100%; 
    height: 120px; 
    background: #FFF; 
    border-left: 2px solid #CDCDCD; 
    position: fixed; 
    z-index: 111; 
} 
#nav-inner { 
    width: 90%; 
} 
#header-img { 
    width: 40%; 
} 
#header-img img { 
    height: 100px; 
} 
#menu-button { 
    display: inline-block; 
} 
#nav-container { 
    width: 59%; 
    display: inline-block; 
} 
#nav-list { 
    position: fixed; 
    height: 100vh; 
    width: 50%; 
    background: #009ED2; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    margin-top: 0; 
    z-index: 2; 
    overflow-y: auto; 
    overflow-x: visible; 
    transform: translate(100%,0); 
} 
.nav-link { 
    display: block; 
    padding: 20px 0; 
    width: 100%; 
} 
.nav-link a { 
    font-size: 1.2rem; 
    color: #FFF; 
    margin-right: 15px; 
} 

}

來源

2017-03-01 Paul

保羅嗨，你能給我們一個更好的演示嗎？我們需要當前問題的一個[mcve]，我現在看到的只是一些破碎的圖像，我唯一看到的絕對定位是'.nav-link-active a：after ' –

它在CSS的主要部分。對於'＃menu-button' – Paul

即使有破損的圖像，它也是s直到工作。您可以看到菜單按鈕圖像位於左側圖像之後。我希望它在右上角。 – Paul

你拼寫錯誤position爲postition。 #nav-container需要vertical-align: top才能在容器頂部對齊，並將top和right的值更改爲#menu-button爲0，因此它將位於頂部/右側。

https://jsfiddle.net/mqtLztuy/1/

來源

2017-03-01 17:39:45

完美。謝謝！ – Paul

@保爾你打賭:) –

裏面#menu-button你有postition: absolute;，而不是position:absolute。刪除position: relative來自#nav-container

來源

2017-03-01 17:38:11 Armin

即使在修復之後，圖像的位置也會遠遠低於頂部的30px – Paul

我更新了答案 – Armin

這是一個有點很難說了一些破碎的結構和圖像丟失的，但是......我沒有看到它標識下的轉移。它堅持正確的（儘管離右邊太遠）。

有一件事我可以告訴你：你已經拼「位置」錯＃菜單按鈕。你寫了「postition」。儘管如此，你可能不應該沿着圖騰柱（到圖像本身）應用它。試試這個：

1. 更改：

#nav-menu { 
width: auto; 
display: inline-block; 
position: absolute; 
right: 30px; 
top:30px; 
}

刪除**的位置是：絕對的;」從你的＃菜單按鈕

來源

2017-03-01 17:43:10

在媒體查詢中用絕對定位一個元素

回答

相關問題