Вопрос или проблема
Проблемы с z-index, не работает как задумано, интересно, что может быть причиной.
Я пытаюсь сделать рамку вокруг кнопки. Эта рамка должна быть градиентной, поэтому я просто пытаюсь сделать кнопку больше без функциональности под кнопкой выше. Почему-то, что бы я ни делал, они не накладываются так, как мне нужно.
Код ниже:
<!DOCTYPE html>
<html lang="se">
<head>
<style>
.knap{
width: 250px;
height: 50px;
border-radius: 200px;
align-content: center;
background-color: #161a20;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.knap::after{
content: '';
position: absolute;
height: 105%;
width: 105%;
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1;
}
.wrap{
display: flex;
justify-content: center;
align-items: center;
}
#b1{
margin-top: 50px;
z-index: 100;
}
</style>
</head>
<body>
<div class="wrap">
<button class="knap" id="b1">О себе</button>
</div>
</body>
</html>
Я пытался поменять значение z-index, также пытался поиграть с div оберткой, но ничего не работает, насколько я знаю.
.knap{
width: 250px;
height: 50px;
border-radius: 200px;
align-content: center;
background-color: #161a20;
border: none;
color: white;
background: linear-gradient(to bottom left, #008cff, #e100ff);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative;
z-index: 1;
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
}
.knap::before{
content: '';
position: absolute;
/* height: 105%;
width: 105%; */
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
border-radius: 200px;
background: black;
z-index: -1;
}
.knap::after {
content: attr(data);
/* background: linear-gradient(to left, #00FFA3, #DC1FFF);*/
-webkit-background-clip: text;
color: transparent;
}
.wrap{
display: flex;
justify-content: center;
align-items: center;}<!DOCTYPE html>
<html lang="se">
<head>
</head>
<body>
<div class="wrap">
<button class="knap" id="b1">О себе</button>
</div>
</body>
</html>Вы почти сделали это, думаю, возможно, display: flex и высота и ширина .knap::before в 105% сбивали вас с толку. Основной класс .knap не имел положительного значения z-index, что помогло. Вот, я изменил некоторые значения, но ваши закомментировал 🙂
</div><div class="s-prose js-post-body" itemprop="text">Вы были так близки. Чтобы это сработало, вам просто нужно было добавить position: relative к .wrap. Чтобы псевдоэлемент был включен в контекст наложения, его родительский элемент должен быть позиционирован, тогда единственное значение z-index, которое вам нужно, это -1 для псевдоэлемента.
(Я изменил высоту и ширину псевдоэлемента на пиксели вместо процентов для равномерной толщины “рамки” со всех сторон, а также убрал некоторые ненужные CSS-свойства.)
.knap {
width: 250px;
height: 50px;
border-radius: 200px;
background-color: #161a20;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.knap::after {
content: "";
position: absolute;
height: 60px;
width: 260px;
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1;
}
.wrap {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#b1 {
margin-top: 50px;
} <div class="wrap">
<div class="knap" id="b1">О себе</div>
</div>Ответ или решение
Проблема с тем, что z-index не работает так, как вы ожидаете, часто связана с контекстом наложения элементов. Давайте подробно рассмотрим вашу ситуацию и предложим решение.
Ваша цель — создать кнопку с градиентной рамкой вокруг нее, воспользовавшись псевдоэлементом. Обратите внимание на следующие моменты:
-
Контекст наложения: Чтобы псевдоэлемент
::after(или::before) использовалz-index, его родительский элемент должен иметь заданное значение свойстваposition(например,relative,absolute,fixedилиsticky). В вашем случае, вы забыли установитьposition: relativeдля родительского элемента.wrap. -
Параметры z-index: Псевдоэлемент по умолчанию не попадает в контекст наложения, если его родительский элемент не имеет позиционирования. Также, значения
z-indexмогут быть только положительными или нулевыми, так как отрицательные значения могут ввести в заблуждение и привести к неожиданным результатам, если они не учитываются должным образом. - Размеры псевдоэлемента: Вместо использования процентов для размеров псевдоэлемента (которые могут привести к неправильной отрисовке в зависимости от размеров родительского элемента), лучше использовать фиксированные размеры (например, пиксели).
Вот исправленный код, который должен решить вашу проблему:
<!DOCTYPE html>
<html lang="se">
<head>
<style>
.knap {
width: 250px;
height: 50px;
border-radius: 200px;
background-color: #161a20;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative; /* Убедитесь, что контекст наложения установлен */
display: flex;
justify-content: center;
align-items: center;
}
.knap::after {
content: '';
position: absolute;
height: 60px; /* Размеры устанавливаются фиксированно */
width: 260px; /* Ширина больше, чтобы покрыть кнопку */
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1; /* Задать отрицательный z-index для псевдоэлемента */
}
.wrap {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Установите позиционирование для родительского элемента */
}
#b1 {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<button class="knap" id="b1">About me</button>
</div>
</body>
</html>Итоги:
- Добавлено свойство
position: relativeдля класса.wrap. - Размеры псевдоэлемента изменены с процентов на фиксированные пиксели, чтобы избежать проблем с отрисовкой.
- Псевдоэлемент по-прежнему имеет
z-index: -1, чтобы находиться под кнопкой.
С этими изменениями ваша разметка должна работать так, как ожидалось, и создать эффект рамки вокруг кнопки. Если у вас останутся какие-либо вопросы, не стесняйтесь спрашивать!