Как сделать так, чтобы два элемента <div> перекрывались?
Мне нужно два div, чтобы они выглядели примерно так:
| |
---| LOGO |------------------------
| |_______________| LINKS |
| CONTENT |
Какой самый изящный / элегантный способ сделать так, чтобы они аккуратно накладывались друг на друга? Логотип будет иметь фиксированную высоту и ширину и будет касаться верхнего края страницы.
Ответы 5
При абсолютном или относительном позиционировании вы можете делать всевозможные перекрытия. Вероятно, вы хотите, чтобы логотип был стилизован под такой стиль:
div#logo {
position: absolute;
left: 100px; // or whatever
}
Примечание: абсолютное положение имеет свои эксцентриситет. Возможно, вам придется немного поэкспериментировать, но делать то, что вы хотите, не должно быть слишком сложно.
Нет, absolute эффективно удаляет тег из потока. Было бы так, как если бы его не было.
Используя CSS, вы устанавливаете абсолютное положение div логотипа и устанавливаете z-порядок выше второго div.
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
Я мог бы подойти к этому так (CSS и HTML):
html,
body {
margin: 0px;
}
#logo {
position: absolute; /* Reposition logo from the natural layout */
left: 75px;
top: 0px;
width: 300px;
height: 200px;
z-index: 2;
}
#content {
margin-top: 100px; /* Provide buffer for logo */
}
#links {
height: 75px;
margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}<div id = "logo">
<img src = "https://via.placeholder.com/200x100" />
</div>
<div id = "content">
<div id = "links">dssdfsdfsdfsdf</div>
</div>есть ли способ сделать контент, просто избегая пространства, используемого логотипом?
хм можешь уточнить? Я так понимаю, вы просто хотите, чтобы логотип был над контентом? если это так, это просто нормальный поток div (поэтому удалите left, top, position из #logo). у меня такое чувство, что вы имеете в виду что-то другое! :)
Я думаю, что имелось в виду, что контент (текст) будет обтекать логотип.
ах хм, я почти уверен, что нет. проблема в том, что элемент может быть перемещен или позиционирован, но не то и другое вместе. пока они не выработают своего рода идею float: center ...
Просто используйте отрицательные поля, во втором div скажите:
<div style = "margin-top: -25px;">
И не забудьте установить свойство z-index, чтобы получить желаемое расположение слоев.
Это, безусловно, самый простой метод, и его можно легко адаптировать для перекрытия нижних колонтитулов с помощью нижнего поля в содержимом страницы. Спасибо!
это решение, похоже, зависит от DOCTYPE, не так ли? потому что он не работал с HTML5 DOCTYPE, когда я пытался.
Это должен быть принятый ответ, абсолютное положение имеет тенденцию вызывать проблемы.
Невозможно использовать z-index без установки позиции на что-то иное, чем статическое. К сожалению, этот ответ не позволяет вам выбрать z-порядок.
Если вы хотите, чтобы логотип занимал место, вам, вероятно, лучше переместить его влево, а затем сдвинуть содержимое с помощью поля, примерно так:
#logo {
float: left;
margin: 0 10px 10px 20px;
}
#content {
margin: 10px 0 0 10px;
}
или любую маржу, которую вы хотите.
Может ли это привести к тому, что логотип будет перекрывать текст там, где есть ссылки? Или отодвинет ссылки в сторону?