1. 首頁
  2. 問答
  3. css導航欄位置固定不起作用

css導航欄位置固定不起作用

2017-03-08 77 views
0

我想製作一個網站。我決定讓導航欄有一個固定的位置，所以當我向下滾動時，我總是可以看到它，但是當我將nav屬性添加到屬性位置時：固定它就會消失。不能'弄清楚發生了什麼。有人可以解釋，我做錯了什麼？非常感謝你！ P.S：我是新來的編碼。css導航欄位置固定不起作用

HTML和CSS

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
header nav #logo { 
 
    width: 140px; 
 
    position: absolute; 
 
    top: 15px; 
 
} 
 

 
nav { 
 
    position: relative; 
 
    background-color: #242628; 
 
    height: 70px; 
 
    padding-left: 20px; 
 
} 
 

 
nav ul { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 600px; 
 
    padding-left: 200px; 
 
} 
 

 
nav ul li { 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    display: inline; 
 
    float: left; 
 
    height: inherit; 
 
    width: 100px; 
 
    border-right: 1px solid gray; 
 
} 
 

 
nav ul li:hover { 
 
    background-color: rgba(12, 240, 255, 0.3); 
 
} 
 

 
nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
}
<header> 
 
    <nav> 
 
    <img id="logo" src="images/logo.png" alt="logo" /> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Rate it!</a></li> 
 
     <li><a href="#">Courses</a></li> 
 
     <li><a href="#">Videos</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-03-08 Andrei

+0

謝謝大家對你的答案和你的時間。在我將top，left和right屬性設置爲0之後，一切正常。看起來我有另一個指定了z-index的元素，它搞亂了一切。我改變了nav元素的z-index值，現在一切正常。 – Andrei

+0

將'left'和'right'設置爲0是'width：100％'的另一種選擇（正如我在inmy answer中所寫的），但這兩種方法都會爲固定元素定義寬度。 'left：0'''不會起作用，順便說一句... – Johannes

回答

0

一旦你解決，你必須指定你想要的位置。

top：20px; left：0px;

等....

來源

2017-03-08 19:30:08

+0

不是真的 - 你還需要'right：0'來使它工作 - 作爲另一種寬度爲100％的方法' – Johannes

0

你有一個width添加到固定元素（在這種情況下，100％）：

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
header nav #logo { 
 
    width: 140px; 
 
    position: absolute; 
 
    top: 15px; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    background-color: #242628; 
 
    height: 70px; 
 
    padding-left: 20px; 
 
} 
 

 
nav ul { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 600px; 
 
    padding-left: 200px; 
 
} 
 

 
nav ul li { 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    display: inline; 
 
    float: left; 
 
    height: inherit; 
 
    width: 100px; 
 
    border-right: 1px solid gray; 
 
} 
 

 
nav ul li:hover { 
 
    background-color: rgba(12, 240, 255, 0.3); 
 
} 
 

 
nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
}
<header> 
 
    <nav> 
 
    <img id="logo" src="images/logo.png" alt="logo" /> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Rate it!</a></li> 
 
     <li><a href="#">Courses</a></li> 
 
     <li><a href="#">Videos</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-03-08 19:30:38 Johannes

0

如果您nav設置爲realtive並更改爲fixed您的absolute元素將相對於body而那些元素將離開nav。

更改absolute元素的position和nav到的CSS：

nav { 
    background-color: #242628; 
    height: 70px; 
    padding-left: 20px; } 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
}

來源

2017-03-08 19:30:55 SilverLink

0

我讓你在這裏工作版本。我只跟01​​更換relative在你的代碼到nav

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 300%; 
 
} 
 

 
header nav #logo { 
 
    width: 140px; 
 
    position: absolute; 
 
    top: 15px; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    background-color: #242628; 
 
    height: 70px; 
 
    padding-left: 20px; 
 
} 
 

 
nav ul { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 600px; 
 
    padding-left: 200px; 
 
} 
 

 
nav ul li { 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    display: inline; 
 
    float: left; 
 
    height: inherit; 
 
    width: 100px; 
 
    border-right: 1px solid gray; 
 
} 
 

 
nav ul li:hover { 
 
    background-color: rgba(12, 240, 255, 0.3); 
 
} 
 

 
nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
}
<header> 
 
    <nav> 
 
    <img id="logo" src="images/logo.png" alt="logo" /> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Rate it!</a></li> 
 
     <li><a href="#">Courses</a></li> 
 
     <li><a href="#">Videos</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

注意，我設置height至300％對文件的一些滾動

來源

2017-03-08 19:31:07

0

老實說，我不看有什麼不對：

http://codepen.io/anon/pen/BWpLdd

.scrollTest { 
    height: 2000px; 
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); 
} 
* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; } 

html, body { 
    width: 100%; 
    height: 100%; } 

header nav #logo { 
    width: 140px; 
    position: absolute; 
    top: 15px; } 

nav { 
    position: fixed; 
    background-color: #242628; 
    height: 70px; 
    padding-left: 20px; 
    width: 100%; 
} 

nav ul { 
    position: absolute; 
    height: 100%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    width: 800px; 
    padding-left: 200px; } 

nav ul li { 
    -moz-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    display: inline-block; 
    height: inherit; 
    width: 100px; 
    border-right: 1px solid gray; } 

nav ul li:hover { 
    background-color: rgba(12, 240, 255, 0.3); } 

nav ul li a { 
    color: white; 
    text-decoration: none; 
    position: absolute; 
    height: inherit; 
    width: inherit; 
    text-align: center; 
    padding-top: 25px; }

確保您將其添加到導航父元素。

來源

2017-03-08 19:31:08 joethemovie

0 

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
header nav #logo { 
 
    width: 140px; 
 
    position: absolute; 
 
    top: 15px; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    background-color: #242628; 
 
    height: 70px; 
 
    padding-left: 20px; 
 
    width: 100%; 
 
background-color: black; 
 
} 
 

 
nav ul { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    
 
} 
 

 
nav ul li { 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    display: inline; 
 
    float: left; 
 
    height: inherit; 
 
    width: 200px; 
 
    border-right: 1px solid gray; 
 
} 
 

 
nav ul li:hover { 
 
    background-color: rgba(12, 240, 255, 0.3); 
 
} 
 

 
nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
} 
 

 
article{ 
 
    height: 500px; 
 
}
<header> 
 
    <nav> 
 
    <img id="logo" src="" alt="logo" /> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Rate it!</a></li> 
 
     <li><a href="#">Courses</a></li> 
 
     <li><a href="#">Videos</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<article></article>

工作代碼

來源

2017-03-08 19:34:28 Knitesh

相關問題

 相關問題