Как Вы сделали бы два <отделение> s перекрытие?
5 ответов
Я мог бы приблизиться к нему как так (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#logo {
position: absolute;
left: 100px; // or whatever
}
Примечание: абсолютное положение имеет свои эксцентриситеты. Необходимо будет, вероятно, экспериментировать немного, но не должно быть слишком трудно сделать то, что Вы хотите.
Используя CSS, Вы устанавливаете отделение логотипа, чтобы расположить абсолютный, и установить z-порядок быть выше второго отделения
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
Если Вы хотите, чтобы логотип занял место, Вы, вероятно, лучше из плавания, это уехало и затем спуск по довольному поле использования, вид подобных это:
#logo {
float: left;
margin: 0 10px 10px 20px;
}
#content {
margin: 10px 0 0 10px;
}
или безотносительно поля Вы хотите.
Просто используйте отрицательные поля, во втором отделении скажите:
<div style="margin-top: -25px;">
И удостоверяются, что установили z-индексное свойство для получения разделения на уровни, Вы хотите.