Это мой 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 пикселей в верхнем левом верхнем углу. Любая идея, почему?
в зависимости от эффекта, который вы пытаетесь получить, вы можете изменить высоту/ширину ссылки для inherit
или вы можете изменить положение на relative
Ссылка позиционируется абсолютно, что удаляет ее из нормального потока и позиционирует себя относительно следующего позиционированного элемента. Родитель привязки не является позиционированным элементом.
Чтобы содержать привязку, добавьте position:relative;
в #logoContainer
.