I am struggling to layer the boxes using z-index

Question

I am struggling to layer the boxes using z-index

I have been struggling to find a solution to the problem, but nothing seems to be working. My goal is to create a gradient border for a slideshow on my website, similar to the one showcased in this video. I attempted to use the :before pseudo selector in my HTML code, which looks like this:

* {
  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>

I would greatly appreciate it if someone could point out where I might be going wrong and why my z-index is not functioning as expected. I am confident that my code is correct, so any insights would be highly valued.

html css

Answer 1

Answer №1

Are you satisfied with this solution?

After carefully analyzing the example, I have reconstructed it using the information from the video you shared.

* {
  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>

To fix the issue with the text visibility, make sure to include the following line in your code:

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

The z-index property was functioning correctly, but the white background and text color made the text invisible. Adding the above line will address this problem.

Answer 2

Are you satisfied with this solution?

After carefully analyzing the example, I have reconstructed it using the information from the video you shared.

* {
  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>

To fix the issue with the text visibility, make sure to include the following line in your code:

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

The z-index property was functioning correctly, but the white background and text color made the text invisible. Adding the above line will address this problem.

Answer 3

Answer №2

If you're looking to create a gradient border in your code, you can follow this example borrowed from css-tricks. For more information, 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>

Answer 4

If you're looking to create a gradient border in your code, you can follow this example borrowed from css-tricks. For more information, 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>

I am struggling to layer the boxes using z-index

Answer №1

Answer №2

Similar questions

How can I prevent my mouse click from being overridden by my mouse hover?

The art of arranging elements on a webpage using HTML and

Is it possible for ng-model to verify its own value?

"Troubleshooting: Why Won't insertAfter Function Work with

Facing a dilemma: Javascript not updating HTML image source

Conceal a different CSS class if a certain CSS class is present on the page

Changing between two images using HTML and CSS

What is the best way to locate and list all video links, and include options for "Play Video" and "Download Video"?

I noticed that my jquery code is injecting extra white space into my HTML5 video

What is the best method to use jQuery Validation Plugin to ensure users select "yes" from at least one of multiple select tags?

Utilizing JavaScript to enable a Bootstrap 5 dropdown menu to open on hover for desktop users and be clickable for mobile users

How can we integrate this icon/font plugin in CSS/JavaScript?

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

Cannot Display CSS Background Image Locally

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

Styling text using SVG in HTML

Issue with the Animated Skill Bar not functioning properly when scrolling

How can I modify the CSS styles for a custom jQuery widget?

Tips for positioning a label within the span element wpcf7-form-control-wrap

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method