<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
<main>
<left>
<span>left</span>
</left>
<center>
<span>center</span>
</center>
<right>
<span>right</span>
</right>
</main>
</body>
</html>
*{
padding: 0vw;
margin: 0vw;
}
nav{
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
align-items: center;
width: 100vw;
height: 45px;
position:sticky;
}
ul {
display: inline-flex;
list-style-type:none;
}
navl{
border-color:red ;
border-style: dotted;
align-items: center;
}
navr{
border-color:red ;
border-style: dotted;
}
main{
justify-content: space-between;
display: flex;
}
left{
border-color: red;
border-style: dotted;
width: 30vw;
height: 400px;
display: inline-flex;
position: sticky;
}
center{
border-color: red;
border-style: dotted;
width: 35vw;
height:5000px;
display: inline-flex;
}
right{
border-color: red;
border-style: dotted;
width: 30vw;
height: 300px;
display: inline-flex;
}
為什么導航欄位置：粘性屬性不起作用？但是，如果我將位置設定為固定，則在這種情況下它可以作業。當我們像 facebook 一樣滾動時，我希望它固定在頂部。我正在嘗試創建一個克隆 Facebook。我是嘗試學習網路開發的初學者。第一個代碼是 HTML，第二個是 CSS 樣式表
uj5u.com熱心網友回復：
只需添加 top:0; z-index：9999；
* {
padding: 0vw;
margin: 0vw;
}
nav {
background-color: rgba(52, 52, 146, 0.829);
display: inline-flex;
justify-content: space-around;
align-items: center;
width: 100vw;
height: 45px;
position: sticky;
z-index: 9999;
top: 0;
}
ul {
display: inline-flex;
list-style-type: none;
}
navl {
border-color: red;
border-style: dotted;
align-items: center;
}
navr {
border-color: red;
border-style: dotted;
}
main {
justify-content: space-between;
display: flex;
}
left {
border-color: red;
border-style: dotted;
width: 30vw;
height: 400px;
display: inline-flex;
position: sticky;
}
center {
border-color: red;
border-style: dotted;
width: 35vw;
height: 5000px;
display: inline-flex;
}
right {
border-color: red;
border-style: dotted;
width: 30vw;
height: 300px;
display: inline-flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<navl>
<ul>
<li><img src="" alt="logo"></li>
<li><input type="search"></li>
<li><img src="" alt="hit"></li>
</ul>
</navl>
<navr>
<ul>
<li><img src="" alt=""dp></li>
<li>Name</li>
<li>i1</li>
<li>i2</li>
<li>i3</li>
<li>i4</li>
<li>i5</li>
</ul>
</navr>
</nav>
<main>
<left>
<span>left</span>
</left>
<center>
<span>center</span>
</center>
<right>
<span>right</span>
</right>
</main>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453124.html
標籤：javascript html css 推特引导
上一篇：單擊時出現彈出模式