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;
}

由于某种原因，链接占据了整个页面的宽度和高度，并且在左上角和顶部有一个20px的填充..任何想法为什么？

Answer 1

链接绝对定位，将其从正常流中移除，并相对于下一个定位元素定位自身。 锚点的父级不是定位元素。

要包含锚点，请添加position:relative; 到#logoContainer 。

Answer 2

根据您尝试获得的效果，您可以更改要inherit的链接的高度/宽度，或者您可以将位置更改为relative