HTML/CSS - 链接不采用父 div 的宽度和高度，即使它们设置为 100%

Question

这是我的 html:

<div id="Header">
    <div id="logoContainer">
        <a id='logoClick' href='/'></a>
        <p id="welcome">Welcome</p>
        <h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
    </div>
</div>

这是我的 CSS:

#logoClick {
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    position: absolute;
}

#loginHeader {
    font-family: consola;
    width: 100%;
    background-color: black;
    color: white;
}


#logoContainer {
    height: 10px;
    width: 200px;
    padding: 20px;
}

出于某种原因，链接占用了整个页面的宽度和高度，并且在左上角和顶部有 20 像素的填充。知道为什么吗？

Answer 1

链接是绝对定位的，它将它从正常流中移除，并相对于下一个定位元素定位自己。 anchor 的父元素不是定位元素。

要包含 anchor ，请将 position:relative; 添加到 #logoContainer。