HTML / CSS - ссылка не принимает ширину и высоту родительского div, даже если они установлены на 100%

0

Это мой 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 пикселей в верхнем левом верхнем углу. Любая идея, почему?

  • 0
    я не понимаю название, соответствующее вашему описанию. В чем проблема?
Теги:
href

2 ответа

1

в зависимости от эффекта, который вы пытаетесь получить, вы можете изменить высоту/ширину ссылки для inherit или вы можете изменить положение на relative

1

Ссылка позиционируется абсолютно, что удаляет ее из нормального потока и позиционирует себя относительно следующего позиционированного элемента. Родитель привязки не является позиционированным элементом.

Чтобы содержать привязку, добавьте position:relative; в #logoContainer.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню