HTML 图像扩展得更远并阻止链接

Question

我放置的图片阻止了我点击链接，我认为这是因为图片可能比我想象的要大（尽管我认为我裁剪了它并且我不确定它是否是其他东西。

这是一张图片（为了避免这个问题，我将他的图片移到了尽可能远的位置，但如果可以解决这个问题，我想将图片移近一些，我觉得了解未来）：

注意：如果我向右移动它，它不会推送内容或任何东西，它只会使导航栏中的链接无法点击（如果不清楚的话）。

这是 HTML：

                    <nav>
                    <ul>
                        <li class="current"><a href="index.html">Home</a></li>
                        <li><a href="jehovah'sWitness.html">Jehovah's Witness</a></li>
                        <li><a href="blockPrinting.html">Wood Block Print</a></li>
                        <li><a href="jazz.html">Jazz</a></li>
                        <li><a href="abercrombie.html">Being Ethical and Socially Responsible</a>    </li>
                    </ul>
                    </nav>

                <div class="container">

                <header>
                    <h1>
                        <img src="images/banner.png" alt="banner">
                        <a href="index.html">Designer Websites</a>
                    </h1>
                </header>

还有我的 CSS：

            nav ul
                {
                list-style-type: none;
                text-align: center;
                }
            nav ul li
                {    
                padding: 5px;
                display: inline-block;
                border: solid 1px black;
                color: black;
                background-color: tan;
                }

            .current
                {
                    background-color: yellow;
                }

            body
                {
                background-color: tan;
                font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
                }

            .container
                {
                width: 80%;
                max-width: 960px;
                margin:0px auto;
                }

            h1 img
                {
                height: 40%;
                position:absolute;
                left:-15px;
                top: -30px;
            }

删除绝对位置的新图片：

Answer 1

尝试添加这个以将锚点放在 img 的“上方”

h1 img {
    z-index: 1;
}
h1 a {
    position: relative;
    z-index: 2;
}

Answer 2

我认为您的“绝对”定位横幅图像漂浮在导航栏上。这就是它不可点击的原因。

删除此代码（您可以保留“高度”为图像设置固定高度）

h1 img {
    height: 40%;
    position: absolute;
    left: -15px;
    top: -30px;
}

现在图像和标题将左对齐。您可以通过在 .container 中添加 text-align:center 来简单地对齐它们。或者您可以添加以下代码：

header {
    text-align: center;
}