Anonymous
Z-индекс всегда уничтожает мой заголовок, как я могу это исправить?
Сообщение
Anonymous » 09 апр 2024, 19:19
Я хочу присвоить заголовку 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;
}
Код: Выделить всё
[url=1-Seite.html]fashion[/url]
[url=1-Seite.html]Home[/url]
[url=2-Seite.html]Shop[/url]
[url=#]Über uns[/url]
latest products
[img]bb.hoodie.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
MEDIUM FIT B HOODIE
1.225€
[img]bbjacke.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
RACING JACKET
3.100€
[img]nfs.hose.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
HEAVY WASHED BOMBER
2.175€
[img]nfs.bomber.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
GREY INSIDE OUT BOMBER
2.750€
[img]ro.coat.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
HOODED COAT GREY/BLACK
4.250€
[img]ro.coat 2.png[/img]
[url=#][/url]
[url=#]add to cart[/url]
[url=#][/url]
HOODED COAT BLACK
4.250€
Подробнее здесь:
https://stackoverflow.com/questions/782 ... n-i-fix-it
1712679587
Anonymous
Я хочу присвоить заголовку z-индекс, но каждый раз, когда я помещаю его в заголовок, он полностью уничтожается, и я не знаю, как я могу это исправить. Кроме того, мои поля перекрывают мою навигационную панель/заголовок, могу ли я исправить это с помощью z-index? [code]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; }[/code] [code] [url=1-Seite.html]fashion[/url] [url=1-Seite.html]Home[/url] [url=2-Seite.html]Shop[/url] [url=#]Über uns[/url] latest products [img]bb.hoodie.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] MEDIUM FIT B HOODIE 1.225€ [img]bbjacke.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] RACING JACKET 3.100€ [img]nfs.hose.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] HEAVY WASHED BOMBER 2.175€ [img]nfs.bomber.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] GREY INSIDE OUT BOMBER 2.750€ [img]ro.coat.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] HOODED COAT GREY/BLACK 4.250€ [img]ro.coat 2.png[/img] [url=#][/url] [url=#]add to cart[/url] [url=#][/url] HOODED COAT BLACK 4.250€ [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/78289199/the-z-index-always-destroys-my-header-how-can-i-fix-it[/url]