Home Why my button is on back of my grid? How can I bring both of my button to front of the grid?

Questions

Why my button is on back of my grid? How can I bring both of my button to front of the grid?

March 10, 2022

Hello I was trying to have a button for each pic in the grid but as you can see in the pic my first button is on the top of the grid but my second button is on back I want both button on front. I tried putting item1 after item2 and item3 and I also tried changing the class of the button but didnt work. I am a beginner so a beginner friendly answer is a plus 🙂

here is the html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style1.css">
</head>

<body>
    <header>
        <div class="grid1">

            <p class="items">Home</p>
            <p class="items">Contact</p>
            <p class="items">About</p>
            <p class="items">Products</p>

        </div>

    </header>
    <main>
        <div class="container">
            <h1 class="heading">Places to visit in Pakistan</h1>
            <div class="box">
                <div class="item1">
                    
                    <button class="btn">Learn More &#8594; </button>
                    
                </div>
                
                <div class="item2"> <button class="btn">Learn More &#8594; </button></div>
                <div class="item3">3</div>
                
        </div>

    </main>
    <footer>

    </footer>
</body>

</html>

here is the css:

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
/* font-family: 'Mukta', sans-serif; */
:root {
    --main-bg-color: #2874f0;
  }
.grid1{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 40px 100px auto;
    grid-column-gap: 30px;
    grid-template-columns: auto auto auto auto;
    
}
.items{
    margin: 42px 59px;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 372px;
    height: 47px;
    font-size: 36px;
    background-color: black;
    color: white;
    font-family: 'Oswald', sans-serif;
}
.box {
    display: grid;
    /* background-color: yellow; */
    height: 56vh;
    /* grid-row-gap: 2px;
    grid-column-gap: 9px; */
    /* grid-gap: 2px 9px; */
    /* grid-gap: 9px; */
    /* grid-template-columns: 34px 334px auto;
    grid-template-rows: 44px 84px; */
    grid-template-columns: 500px 500px 500px;
    grid-template-rows: 500px 500px 500px ;
    justify-content: center;
    width: 80vw;
    margin: 0vh 10vw;
}

.btn{
    width: 1000px;
    height: 90px;
    color: white;
    background-color: var(--main-bg-color);
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Smooch Sans', sans-serif;
    font-size: 68px;
    margin: 912px 0px 0px 0px;
}
#btn2{
    margin: 0px 0px 0px 0px;
}
/* .btn2{
    width: 1000px;
    height: 90px;
    color: white;
    background-color: var(--main-bg-color);
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Smooch Sans', sans-serif;
    font-size: 68px;
    margin: 912px 0px 0px 0px;
} */
.item {
    background-color: aquamarine;
    border: 2px solid red;
}

.item1 {
    background-image: url("minar.jpg");
    height: 100%;
    background-size: cover;
    border: 2px solid red;
    grid-column: 1/3;
    grid-row: 1/3;


}
.item2 {
    background-image: url("quaid.JPG");
    height: 100%;
    background-size: cover;
    border: 2px solid red;
}
.item3 {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
    height: 100%;
    background-size: cover;
    border: 2px solid red;
}
.heading{
    display: flex;
    justify-content: center;
}

>Solution :

You need to use the z-index property in CSS. U need to put z-index: 1 to all button and z-index: 0 to all items. I have demonstrated it on the item3. Also why don’t you use ID for item1, item2 and so on? And put some common class on all of them

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');

/* font-family: 'Mukta', sans-serif; */

:root {
  --main-bg-color: #2874f0;
}

.grid1 {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 40px 100px auto;
  grid-column-gap: 30px;
  grid-template-columns: auto auto auto auto;
}

.items {
  margin: 42px 59px;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 372px;
  height: 47px;
  font-size: 36px;
  background-color: black;
  color: white;
  font-family: 'Oswald', sans-serif;
}

.box {
  display: grid;
  /* background-color: yellow; */
  height: 56vh;
  /* grid-row-gap: 2px;
    grid-column-gap: 9px; */
  /* grid-gap: 2px 9px; */
  /* grid-gap: 9px; */
  /* grid-template-columns: 34px 334px auto;
    grid-template-rows: 44px 84px; */
  grid-template-columns: 500px 500px 500px;
  grid-template-rows: 500px 500px 500px;
  justify-content: center;
  width: 80vw;
  margin: 0vh 10vw;
}

.btn {
  width: 1000px;
  height: 90px;
  color: white;
  background-color: var(--main-bg-color);
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Smooch Sans', sans-serif;
  font-size: 68px;
  margin: 912px 0px 0px 0px;
  z-index: 1;
}

#btn2 {
  margin: 0px 0px 0px 0px;
}


/* .btn2{
    width: 1000px;
    height: 90px;
    color: white;
    background-color: var(--main-bg-color);
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Smooch Sans', sans-serif;
    font-size: 68px;
    margin: 912px 0px 0px 0px;
} */

.item {
  background-color: aquamarine;
  border: 2px solid red;
}

.item1 {
  background-image: url("minar.jpg");
  height: 100%;
  background-size: cover;
  border: 2px solid red;
  grid-column: 1/3;
  grid-row: 1/3;
  z-index: 0;
}

.item2 {
  background-image: url("quaid.JPG");
  height: 100%;
  background-size: cover;
  border: 2px solid red;
  z-index: 0;
}

.item3 {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
  height: 100%;
  background-size: cover;
  border: 2px solid red;
}

.heading {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style1.css">
</head>

<body>
  <header>
    <div class="grid1">

      <p class="items">Home</p>
      <p class="items">Contact</p>
      <p class="items">About</p>
      <p class="items">Products</p>

    </div>

  </header>
  <main>
    <div class="container">
      <h1 class="heading">Places to visit in Pakistan</h1>
      <div class="box">
        <div class="item1">

          <button class="btn">Learn More &#8594; </button>

        </div>

        <div class="item2"> <button class="btn">Learn More &#8594; </button></div>
        <div class="item3">3</div>

      </div>

  </main>
  <footer>

  </footer>
</body>

</html>

EDIT I just realized that I put the z-index: 0; on item 2 and item1 but it applying to item3 too. I dont know why…