css Question posted in
Some basic documentation can be found here.

Css – z-index not working as intended, wondering what is causing the issue

I am trying to make a border around a button. This border is supposed to be a gradient so i am simply trying to make a bigger button without functionality underneath the button above. For some reason, no matter what I do they won’t layer the way I want them to.

Code below:

<!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">About me</button>
</div>
</body>
</html>

I have tried changing the z-index around, i have also tried to mess around in the wrapper div but nothing works afaik.

Tags:

2

Answers


  1. 0 
    .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">About me</button>
</div>
</body>
</html>

    You nearly had it, I think maybe the display: flex and the height and width of the .knap::before at 105% were throwing you off. The main .knap class didn’t have any positive z-index on it, which helped. Here you go, I changed some values but commented out yours 🙂

    Login or Signup to reply.
  2. 0

    You were so close. To make it work you just needed to add position: relative to .wrap. For the psuedo-element to be included in the stacking context its parent element must be positioned, then the only z-index you need is a -1 for the pseudo-element.

    (I changed the height and width of the pseudo-element to px instead of % for even "border" thickness all around, and I also removed some unnecessary CSS properties.)

          .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">About me</div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search