Заголовок скрывается за моим div
Итак, я занимаюсь позиционированием, и я делаю "простой" сайт, но у меня проблема с <h2> в строке 25. Он прячется за блоком .mission, а не под ним. Что я контролирую?
вот ссылка на мой репозиторий git: https://github.com/itsolidude/Tea_Cozy
вот простой код:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Tea Cozy | Home</title>
<link rel = "stylesheet" href = "./resources/css/style.css">
</head>
<body>
<header>
<img src = "./resources/images/img-tea-cozy-logo.png" alt = "our logo">
<nav>
<a href = "#"><span>Mission</span></a>
<a href = "#"><span>Featured Tea</span></a>
<a href = "#"><span>Locations</span></a>
</nav>
</header>
<!-- main-content,our mission -->
<div class = "mission">
<div class = "mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-- tea of the month -->
<h2>Tea of the Month</h2> <!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
<h4>What's Steeping at The Tea Cozy?</h4>
<div class = "tea-of-month">
<div class = "item">
<img src = "./resources/images/img-berryblitz.jpg" alt = "A picture of Fall Berry Blitz Tea">
<span>Fall Berry Blitz Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-spiced-rum.jpg" alt = "A picture of Spiced Rum Tea">
<span>Spiced Rum Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-donut.jpg" alt = "A picture of Seasonal Donuts">
<span>Seasonal Donuts</span>
</div>
<div class = "item">
<img src = "./resources/images/img-myrtle-ave.jpg" alt = "A picture of Myrtle Ave Tea">
<span>Myrtle Ave Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-bedford-bizarre.jpg" alt = "A picture of Bedford Bizarre Tea">
<span>Bedford Bizarre Tea</span>
</div>
</div>
</body>
</html>
Ответы 3
Вам нужно будет добавить Z-index в ваш css, обычно все z-index 1, поэтому, если вы хотите что-то на переднем плане, просто дайте ему z-index 2 или 3
ваш h2 не находится внутри div, если вы поместите его внутри div и у вас есть оболочка вокруг всех div, вы можете разместить все div друг под другом или даже с помощью отзывчивой оболочки, вы можете дать div абсолютную позицию
Вам нужно удалить 'position: relative' в классе миссии.
это работает Но затем div .mission перемещается вверх, и мне нужно, чтобы position: relative; поместил его под заголовком.
Затем вам нужно добавить «position: relative» к каждому элементу, который вы хотите под элементом .mission. Итак, вам также нужно добавить позицию относительно тега h2. Затем вам может потребоваться добавить верх: 40 пикселей или около того. (поскольку вы также добавили в миссию 'top' css)
Обратите внимание, что:
Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements.
- Относительное позиционирование @ MDN; Акцент мой.
Таким образом, top:20px на .mission смещает его, не затрагивая другие элементы, вызывая их перекрытие.
Я не уверен в назначении top:20px на .mission, но, если это необходимо, вы можете рассмотреть возможность использования margin вместо top. Если в этом нет необходимости, вы можете полностью удалить top.
Использование поля толкает <header вниз. Это результат схлопывающиеся поля. Есть различные методы, чтобы развернуть поля, каждый со своими плюсами и минусами. В приведенном ниже примере я использовал псевдоэлемент ::before на <body>.
Также см. Свертывание полей @ w3.org.
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
text-align: center;
}
/* UNCOLLAPSE MARGIN */
body::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Tea Cozy | Home</title>
<link rel = "stylesheet" href = "./resources/css/style.css">
</head>
<body>
<header>
<img src = "./resources/images/img-tea-cozy-logo.png" alt = "our logo">
<nav>
<a href = "#"><span>Mission</span></a>
<a href = "#"><span>Featured Tea</span></a>
<a href = "#"><span>Locations</span></a>
</nav>
</header>
<!-- main-content,our mission -->
<div class = "mission">
<div class = "mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-- tea of the month -->
<h2>Tea of the Month</h2>
<!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
<h4>What's Steeping at The Tea Cozy?</h4>
<div class = "tea-of-month">
<div class = "item">
<img src = "./resources/images/img-berryblitz.jpg" alt = "A picture of Fall Berry Blitz Tea">
<span>Fall Berry Blitz Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-spiced-rum.jpg" alt = "A picture of Spiced Rum Tea">
<span>Spiced Rum Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-donut.jpg" alt = "A picture of Seasonal Donuts">
<span>Seasonal Donuts</span>
</div>
<div class = "item">
<img src = "./resources/images/img-myrtle-ave.jpg" alt = "A picture of Myrtle Ave Tea">
<span>Myrtle Ave Tea</span>
</div>
<div class = "item">
<img src = "./resources/images/img-bedford-bizarre.jpg" alt = "A picture of Bedford Bizarre Tea">
<span>Bedford Bizarre Tea</span>
</div>
</div>
</body>
</html>ty, который тоже работает, проблема в том, что при использовании margin: заголовок сдвигается вниз
Я понимаю что ты имеешь ввиду. Похоже, это вызвано схлопывающиеся поля. Пожалуйста, посмотрите мою правку.
очень много, я только что прочитал "схлопывающиеся поля", но я действительно не понимаю, что происходит. и почему вы установили верхнее значение на 0. Не могли бы вы дать мне простое объяснение? :п
top на <header>, чтобы убедиться, что он находится наверху, поскольку поля .mission сжимаются с <body>. Но я отредактировал свой ответ, чтобы использовать другой метод: псевдоэлемент на <body>.
да, я знаю, но я не хочу, чтобы h2 был только наверху стека, я хочу, чтобы он был ПОД div