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

【问题标题】：HTML / CSS - link not taking width and height of parent div even though they are set to 100%HTML / CSS - 链接不采用父 div 的宽度和高度，即使它们设置为 100%
【发布时间】：2014-02-07 13:29:17
【问题描述】：

这是我的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 的填充。知道为什么吗？

【问题讨论】：

我不明白标题与您的描述相符。有什么问题？

标签： html css href

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：