时间戳

首页 > 解决方案 > 如何将图像放在导航栏顶部

html - 如何将图像放在导航栏顶部

问题描述

我需要我的图像位置：粘性但我需要它在我的导航栏顶部。HTML5。这是一个学校项目，我真的需要完成它。谢谢，麻烦您了

       <div>
    <a href="index.html">
<img class="logo" src="./images/logo.png">
</a>
</div>
  <nav> <a href="index.html">Home</a> 
<a href="/pages/articles.html">Articles</a> 
<a href="/pages/contact.html">Contact</a>
<a href="/pages/sources.html">Sources</a></nav>

CSS

nav{ 
background-color: black; 
position: fixed; 
text-align: center; 
z-index: 10; 
top: 3%; 
left: 50% 
width: 100%; 
height:50px ; 
transform: translate(-50%, -50%); 
display: block;}

div{
transform: translate(-40%, 40%);
top: 3%;
z-index: 10;
overflow: hidden;}

标签： htmlcss

解决方案

试试这个，看看是否是你想要的。

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div>
        <a href="index.html">
            <img class="logo" src="./images/logo.png">
        </a>
        <nav>
            <div>
                <img src="https://www.history.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTU3ODc5MDg2NDMzNTEwNzI5/death-of-socrates.jpg"
                    alt="Your image" class="img">
            </div>
            <a href="index.html">Home</a>
            <a href="/pages/articles.html">Articles</a>
            <a href="/pages/contact.html">Contact</a>
            <a href="/pages/sources.html">Sources</a>
        </nav>
    </div>
</body>

</html>

CSS

nav {
    background-color: black;
    position: fixed;
    text-align: center;
    z-index: 10;
    top: 3%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    display: block;
}

div{
    height: auto;
}

.img {
    z-index: -1;
}

推荐阅读