1. 首页
  2. 问答
  3. 固定柔性导航栏后面的内容而不是以下

固定柔性导航栏后面的内容而不是以下

2017-08-03 33 views
1

我创建了一个简单的导航栏，并用柔性盒子排列了它的子节点。导航栏的位置是固定的。但是导航栏后面的容器（div）从页面开始而不是导航栏开始后，我认为它被忽略，导致其位置属性被固定。固定柔性导航栏后面的内容而不是以下

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

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

我尝试添加填充顶：40像素;身体但这显示为导航栏上方的空间

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

 
body { 
 
    padding-top: 40px; 
 
} 
 

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-08-03 scroobius

+0

假设我读这个权利，你可以尝试添加'填充顶：40px'到'.blocks'类 –

回答

1

添加padding-top: 40px您.blocks类。这将使导航栏固定在顶部，并将您的区块向下移动。

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

 

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    padding-top: 40px; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block">Test Content</div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-08-03 04:06:27

相关问题

 相关问题