CODEWITHSUNDEEP
htmlcss
Krishna Noutiyal
Krishna Noutiyal

Reputation: 98

i am not able to overlay the boxes using z-index

I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:

* {
  color: white;
  margin: 0px 0px;
  padding: 0px 0px;
  box-sizing: border-box;
}

body {
  background-color: #060c21;
}


/* NavBar Starts */

#mainnav {
  display: flex;
  justify-content: center;
  padding: 15px;
  background-color: black;
  width: 98%;
  position: static;
}

.items>a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}

.items {
  margin: 0 5vw 0 5vw;
  padding: 1vw;
  width: fit-content;
  font-size: 1.3rem;
}

.items>a:hover {
  color: rgb(0, 255, 242);
}


/* NavBar Ends */


/* Content Starts */

.slide-box {
  position: relative;
  border: 2px solid red;
  height: 75vh;
  width: 95%;
  margin: 2% auto;
}

.slide-box:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Practice</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
  <!-- font-family: 'Roboto Slab', serif; -->
  <link rel="stylesheet" href="Vaishnavi.css" />
</head>

<body>
  <nav>
    <div id="mainnav">
      <div class="items">
        <a href="Vaishnavi.html">Home</a>
      </div>

      <div class="items">
        <a href="">About US</a>
      </div>

      <div class="items">
        <a href="">Creations</a>
      </div>

      <div class="items">
        <a href="">Help</a>
      </div>
    </div>
  </nav>
  <div class="slide-box">
    <h1>This is glowing box</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
    </p>
  </div>
</body>

</html>

Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.

Upvotes: 1

Views: 286

Answers (2)

Jakub A Suplicki
Jakub A Suplicki

Reputation: 4801

Is this something that you are looking for?

You can see that I recreated the example based on this video that you have provided.

* {
  color: white;
  margin: 0px 0px;
  padding: 0px 0px;
  box-sizing: border-box;
}

body {
  background-color: #060c21;
}


/* NavBar Starts */

#mainnav {
  display: flex;
  justify-content: center;
  padding: 15px;
  background-color: black;
  width: 98%;
  position: static;
}

.items>a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}

.items {
  margin: 0 5vw 0 5vw;
  padding: 1vw;
  width: fit-content;
  font-size: 1.3rem;
}

.items>a:hover {
  color: rgb(0, 255, 242);
}


/* NavBar Ends */


/* Content Starts */

.slide-box {
  position: relative;
  margin: 2% auto;
  height: 75vh;
  width: 95%;
  background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 20s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice</title>

    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
    <!-- font-family: 'Roboto Slab', serif; -->
    <link rel="stylesheet" href="Vaishnavi.css" />
  </head>
  <body>
    <nav>
      <div id="mainnav">
        <div class="items">
          <a href="Vaishnavi.html">Home</a>
        </div>

        <div class="items">
          <a href="">About US</a>
        </div>

        <div class="items">
          <a href="">Creations</a>
        </div>

        <div class="items">
          <a href="">Help</a>
        </div>
      </div>
    </nav>
    <div class="slide-box">
      <h1>This is glowing box</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
      </p>
    </div>
  </body>
</html>

What you were missing in your code to see the text was the line below:

.slide-box {
  background: linear-gradient(0deg, #000, #262626);
}

The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.

Upvotes: 1

Robin
Robin

Reputation: 5427

Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}

.module-border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}
<div class="module-border-wrap">
  <div class="module">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
  </div>
  
</div>

Upvotes: 0

Related Questions