Z-индекс всегда уничтожает мой заголовок, как я могу это исправить?
Я хочу присвоить заголовку z-индекс, но каждый раз, когда я помещаю его в заголовок, он полностью уничтожается, и я не знаю, как я могу это исправить. Кроме того, мои поля перекрывают панель навигации/заголовок, могу ли я исправить это с помощью z-index?
body {
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 19px 20px;
background: #DCdCdC
}
.logo {
position: fixed;
top: -10px;
font-size: 32px;
padding: 20px 20px;
color: #fff;
text-decoration: none;
font-weight: 650;
}
.navbar a {
font-size: 18px;
color: #fff;
font-weight: 600;
text-decoration: none;
margin-left: 400px;
word-spacing: 2px;
z-index: 1;
}
.products .box-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.products .box-container .box {
flex: 1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
border-radius: .5rem;
border: .1rem solid rgba(0, 0, 0, .1);
position: relative;
transition: 1s;
z-index: 0;
}
.products .box-container .box .image {
position: relative;
text-align: center;
padding-top: 2rem;
overflow: hidden;
}
.box:hover {
transform: scale(1.05);
z-index: 0;
}
.products .box-container .box .image .icons {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.products .box-container .box .image .icons a {
margin-left: 8rem;
margin-bottom: -3rem;
height: 4rem;
line-height: 6rem;
font-size: 1.25rem;
width: 50% background: black);
color: #000;
}
.products .box-container .box .content {
padding: 2rem;
text-align: center;
}
.products .box-container .box .content h3 {
font-size: 2rem;
color: #000;
}
.products .box-container .box .content price {
font-size: 1.5rem;
color: black;
font-weight: bolder;
padding-top: 1rem;
}<div class = "header">
<a href = "1-Seite.html" class=l ogo>fashion</a>
<nav class = "navbar">
<a href = "1-Seite.html">Home</a>
<a href = "2-Seite.html">Shop</a>
<a href = "#">Über uns</a>
</nav>
</div>
<section class = "products" id = "products">
<h1 class = "heading"> latest <span> products</span> </h1>
<div class = "box-container">
<div class = "box">
<div class = "image">
<img src = "bb.hoodie.png" width = "50%;" id = "box" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>MEDIUM FIT B HOODIE</h3>
<div class = "price"> 1.225€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "bbjacke.png" width = "50%;" id = "box" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>RACING JACKET</h3>
<div class = "price"> 3.100€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "nfs.hose.png" width = "50%;" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HEAVY WASHED BOMBER</h3>
<div class = "price">2.175€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "nfs.bomber.png" width = "50%;" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>GREY INSIDE OUT BOMBER</h3>
<div class = "price"> 2.750€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "ro.coat.png" width = "50%;" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HOODED COAT GREY/BLACK </h3>
<div class = "price"> 4.250€ <span> </span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "ro.coat 2.png" width = "50%;" alt = "">
<div class = "icons">
<a href = "#" class = "fas fa-heart"></a>
<a href = "#" class = "cart-btn">add to cart</a>
<a href = "#" class = "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HOODED COAT BLACK</h3>
<div class = "price"> 4.250€ <span> </span> </div>
</div>
</div>
</div>просто хотел подчеркнуть, что у вас отсутствует закрытие </section> .. но дело не в этом. Вы пытались добавить z-index: 1; к элементу .header? вы стилизовали заголовок с помощью position: fixed, поэтому элемент удаляется из обычного потока документа, и для него не создается места в макете страницы. Кроме того, он всегда будет оставаться поверх области просмотра при прокрутке страницы... поэтому он будет выглядеть так, будто элементы .box «перекрываются». Но при этом заголовок должен охватывать основной документ (попробуйте стратегию zindex).
—
08.04.2024 14:16
@RahulMehta я не знаю, как только я присваиваю заголовку z-индекс, все мои разные вещи в заголовке перемещаются влево, теряется цветной шрифт и т. д.
—
09.04.2024 15:43
@DiegoD это то, что я пробовал и в чем заключался мой вопрос. каждый раз, когда я даю .head зиндекс, все смещается влево и теряет цвет
—
09.04.2024 15:45
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
4
65
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Начнем с того, что в вашем коде есть несколько ошибок в строках с 88 по 90.
И хотя я не могу решить вашу первую проблему, я могу ответить на ваш вопрос относительно z-index и ваших полей, перекрывающих вашу навигационную панель/заголовок. Если вы хотите, чтобы ваши «коробки» перекрывали (противоположно перекрытию) панель навигации/заголовок, тогда да, вы можете использовать Z-index. Если вы хотите, чтобы это было ниже, вам необходимо использовать разрывы или другие компоненты HTML. Вы также можете использовать компоненты CSS, которые связаны с положением. (Обратите внимание, что Z-индекс — не единственный способ сделать что-то перекрытием)
Единственная причина, по которой я могу думать, что это не работает для вас, заключается в том, что у вас не было ; в конце свойства background для header
body {
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
padding: 0;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding:19px 20px;
background: red;
z-index: 10;
}
.logo {
position: fixed;
top: -10px;
font-size: 32px;
padding:20px 20px;
color: #fff;
text-decoration: none;
font-weight: 650;
}
.navbar a {
font-size: 18px;
color: #fff;
font-weight: 600;
text-decoration: none;
margin-left: 400px;
word-spacing: 2px;
z-index: 1;
}
.products {
margin-top: 5rem;
padding: 2rem;
}
.products .box-container{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.products .box-container .box{
flex:1 1 15rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.1);
position: relative;
transition: 1s;
cursor: pointer;
}
.products .box-container .box .image{
position:relative;
text-align: center;
padding-top: 2rem;
overflow: hidden;
}
.box:hover{
transform:scale(1.05);
}
.products .box-container .box .image .icons {
position: absolute;
bottom: 0; left:0; right: 0;
display: flex;
}
.products .box-container .box .image .icons a {
margin-left: 8rem;
margin-bottom: -3rem;
height: 4rem;
line-height:6rem;
font-size: 1.25rem;
width: 50%
background: black);
color:#000;
}
.products .box-container .box .content {
padding:2rem;
text-align: center;
}
.products .box-container .box .content h3 {
font-size:2rem;
color: #000;
}
.products .box-container .box .content price {
font-size:1.5rem;
color: black;
font-weight:bolder;
padding-top:1rem;
}<!DOCTYPE html>
<html lang = "de">
<head>
<meta charset = "utf-8">
<title>fashion</title>
<link rel = "stylesheet" type = "text/css" href = "style_2_Seite.css" media = "all" />
</head>
<body>
<div class = "header">
<a href= "1-Seite.html" class= logo>fashion</a>
<nav class = "navbar">
<a href = "1-Seite.html">Home</a>
<a href = "2-Seite.html">Shop</a>
<a href = "#">Über uns</a>
</nav>
</div>
<section class = "products" id = "products">
<h1 class = "heading"> latest <span> products</span> </h1>
<div class = "box-container">
<div class = "box">
<div class = "image">
<img src = "bb.hoodie.png" width = "50%;" id = "box" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>MEDIUM FIT B HOODIE</h3>
<div class = "price"> 1.225€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "bbjacke.png" width = "50%;" id = "box" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>RACING JACKET</h3>
<div class = "price"> 3.100€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "nfs.hose.png" width = "50%;" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HEAVY WASHED BOMBER</h3>
<div class = "price">2.175€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "nfs.bomber.png" width = "50%;" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>GREY INSIDE OUT BOMBER</h3>
<div class = "price"> 2.750€ <span></span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "ro.coat.png" width = "50%;" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HOODED COAT GREY/BLACK </h3>
<div class = "price"> 4.250€ <span> </span> </div>
</div>
</div>
<div class = "box">
<div class = "image">
<img src = "ro.coat 2.png" width = "50%;" alt = "">
<div class = "icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class = "content">
<h3>HOODED COAT BLACK</h3>
<div class = "price"> 4.250€ <span> </span> </div>
</div>
</div>
</div>
</body>
</html>Пожалуйста :) Буду признателен, если вы проголосуете за ответ и отметите его как принятый/решенный.
—
09.04.2024 22:10
Другие вопросы по теме
Файл SVG не используется в качестве маски CSS
При изменении количества общее количество отображается как NaN
Изменение цвета фона всплывающей подсказки element-ui
Завершение CSS PhpStorm перестало работать (Ctrl + Space не дает никаких подсказок) в файлах Blade
Рейтинг CSS при наведении
Кажется, что первый столбец моей таблицы смещает два других столбца вправо, и я не могу это изменить
Семейство шрифтов: вывод курсивом в стиле комиксов без шрифта CSS
Как предотвратить создание новых текстовых узлов после нажатия клавиши «Ввод» в элементе contenteditable?
JQuery .show() работает, но .hide() не работает
Масштабируйте сегмент SVG, не перемещая его
Похожие вопросы
Файл SVG не используется в качестве маски CSS
При изменении количества общее количество отображается как NaN
Blazor WASM Невозможно загрузить статическую HTML-страницу из папки wwwroot
Завершение CSS PhpStorm перестало работать (Ctrl + Space не дает никаких подсказок) в файлах Blade
Java Script для интернет-теста скорости HTML и JS, неправильная структура
Кажется, что первый столбец моей таблицы смещает два других столбца вправо, и я не могу это изменить
Автозаполнение JQuery из БД при весенней загрузке и Thymeleaf
JQuery .show() работает, но .hide() не работает
SpringBoot + Thymeleaf: включить фрагменты
Как отправить html-трафик из html-файла в балансировщик нагрузки в AWS?
Что вы имеете в виду, говоря, что ваш заголовок уничтожается с помощью z-index? Кажется, все в порядке, когда я попробовал это в jsfiddle