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

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 >

            <p >Home</p>
            <p >Contact</p>
            <p >About</p>
            <p >Products</p>

        </div>

    </header>
    <main>
        <div >
            <h1 >Places to visit in Pakistan</h1>
            <div >
                <div >
                    
                    <button >Learn More &#8594; </button>
                    
                </div>
                
                <div > <button >Learn More &#8594; </button></div>
                <div >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;
}

CodePudding user response：

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 >

      <p >Home</p>
      <p >Contact</p>
      <p >About</p>
      <p >Products</p>

    </div>

  </header>
  <main>
    <div >
      <h1 >Places to visit in Pakistan</h1>
      <div >
        <div >

          <button >Learn More &#8594; </button>

        </div>

        <div > <button >Learn More &#8594; </button></div>
        <div >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...

CodePudding user response：

You need to give:

.btn{
  position: relative;
}

This will solve your problem. Both buttons will come in front of the image.