Im trying to make a hovered div show on top of everything-CodePudding

The div that is draggable with the class of .b1, background color red, should show on top of everything else. Please ignore the other CSS completely.

I couldn't get any more information about this subject so this is my last resort. Otherwise I'll have to spend days trying to figure it out. Thanks!

$('.b1').css("background-color", "red").css("position", "absolute");
$('.b1').draggable();

$(function() {
  $(".b1").draggable({
    revert: true
  }); //.css("position", "relative"); 
});

body {
  position: fixed;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: /*red*/
  ;
}

main {
  position: relative;
  border-radius: 1%;
  display: grid;
  overflow: hidden;
  outline: 5px solid #5F9EA0;
  background-color: white;
}

footer {
  outline: 5px solid black;
  /*width: 50%;
    height: 20%;*/
  position: relative;
  border-radius: 1%;
  top: 10%;
  display: flex;
  justify-content: space-around;
  padding: 0px;
  align-items: center;
  background-color: white;
  z-index: -1;
}


/*Larger than 320 px*/

@media (min-width: 320px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 20px) / repeat(3, 20px);
    width: 100%;
    padding: 0;
  }
  .container {
    height: 180px;
    width: 180px;
    padding: 0px;
    top: 15px;
  }
  footer {
    height: 90px !important;
    margin-top: 30px;
  }
  main {
    display: grid;
    grid-template: repeat(3, 60px) / repeat(3, 60px);
    /*height: 630px;*/
  }
}


/*Larger than 768 px*/

@media (min-width: 768px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 40px) / repeat(3, 40px);
    width: 100%;
    padding: 0;
  }
  .container {
    height: 360px;
    width: 360px;
    padding: 0px;
    top: 50px;
  }
  footer {
    height: 150px !important;
    margin-top: 50px;
  }
  .option1>.col {
    height: 90px;
    width: 90px;
    display: grid;
    grid-template: repeat(3, 30px) / repeat(3, 30px);
  }
  main {
    grid-template: repeat(3, 120px) / repeat(3, 120px);
    height: 630px;
  }
}


/*Larger than 1024 px*/

@media (min-width: 1024px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 50px) / repeat(3, 50px);
    padding: 0;
    width: 100%;
  }
  .container {
    width: 450px;
    padding: 0px;
    top: 30px;
  }
  main {
    grid-template: repeat(3, 150px) / repeat(3, 150px);
    height: 450px !important;
    margin-top: 5%;
  }
  footer {
    height: 170px !important;
    width: 450px;
    margin-top: 50px;
  }
  .option1>.col {
    height: 120px;
    width: 120px;
    display: grid;
    grid-template: repeat(3, 40px) / repeat(3, 40px);
  }
}


/*Larger than 1200 px*/

@media (min-width: 1200px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 70px) / repeat(3, 70px);
    width: 210px;
    padding: 0;
  }
  .container {
    width: 630px;
    padding: 0px;
    top: 0%;
  }
  footer {
    height: 210px !important;
    margin-top: 25px;
  }
  .option1>.col {
    height: 180px;
    width: 180px;
    display: grid;
    grid-template: repeat(3, 60px) / repeat(3, 60px);
  }
  main {
    grid-template: repeat(3, 210px) / repeat(3, 210px);
    margin-top: 2%;
    height: 630px !important;
  }
}

.option1 {
  height: auto;
  width: auto;
  border: 1px solid red;
  padding: 0;
  z-index: 2;
}

.col {
  border: 2px solid #5F9EA0;
  padding: 0;
  overflow: hidden;
}

.col>* {
  border: 1px solid #ADD5D6;
}

.option1>.col>* {
  /*    z-index: 2;
    position: absolute;*/
}

.option1>* {
  border: 1px solid black;
}


/*.one > *{
    height: 70px;
    width: 70px;
    padding: 0;
    margin: 0;
}*/


/*.one{
    border: 1px solid red;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
    padding: 0;
}
.two{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.three{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.four{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.five{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.six{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.seven{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.eight{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.nine{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}*/


/*.i{
    border: 1px solid blue;
}
.ii{
    border: 1px solid blue;
}
.iii{
    border: 1px solid blue;
}
.iv{
    border: 1px solid blue;
}
.v{
    border: 1px solid blue;
}
.vi{
    border: 1px solid blue;
}
.vii{
    border: 1px solid blue;
}
.viii{
    border: 1px solid blue;
}
.ix{
    border: 1px solid blue;
}*/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<footer >
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</footer>

CodePudding user response：

To do what you require simply set the z-index of the .b1 element in CSS.

Also note that the setting of the CSS properties in jQuery outside of the document.ready block isn't a good idea, and should be done through CSS anyway.

Finally, jQuery 1.10 is very outdated. Update this to 3.6.

jQuery(function($) {
  $(".b1").draggable({
    revert: true
  });
});

/* fixed styling: */
.b1 {
  background-color: red;
  z-index: 1000;
}

body {
  position: fixed;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: /*red*/
  ;
}

main {
  position: relative;
  border-radius: 1%;
  display: grid;
  overflow: hidden;
  outline: 5px solid #5F9EA0;
  background-color: white;
}

footer {
  outline: 5px solid black;
  /*width: 50%;
    height: 20%;*/
  position: relative;
  border-radius: 1%;
  top: 10%;
  display: flex;
  justify-content: space-around;
  padding: 0px;
  align-items: center;
  background-color: white;
  z-index: -1;
}


/*Larger than 320 px*/

@media (min-width: 320px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 20px) / repeat(3, 20px);
    width: 100%;
    padding: 0;
  }
  .container {
    height: 180px;
    width: 180px;
    padding: 0px;
    top: 15px;
  }
  footer {
    height: 90px !important;
    margin-top: 30px;
  }
  main {
    display: grid;
    grid-template: repeat(3, 60px) / repeat(3, 60px);
    /*height: 630px;*/
  }
}


/*Larger than 768 px*/

@media (min-width: 768px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 40px) / repeat(3, 40px);
    width: 100%;
    padding: 0;
  }
  .container {
    height: 360px;
    width: 360px;
    padding: 0px;
    top: 50px;
  }
  footer {
    height: 150px !important;
    margin-top: 50px;
  }
  .option1>.col {
    height: 90px;
    width: 90px;
    display: grid;
    grid-template: repeat(3, 30px) / repeat(3, 30px);
  }
  main {
    grid-template: repeat(3, 120px) / repeat(3, 120px);
    height: 630px;
  }
}


/*Larger than 1024 px*/

@media (min-width: 1024px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 50px) / repeat(3, 50px);
    padding: 0;
    width: 100%;
  }
  .container {
    width: 450px;
    padding: 0px;
    top: 30px;
  }
  main {
    grid-template: repeat(3, 150px) / repeat(3, 150px);
    height: 450px !important;
    margin-top: 5%;
  }
  footer {
    height: 170px !important;
    width: 450px;
    margin-top: 50px;
  }
  .option1>.col {
    height: 120px;
    width: 120px;
    display: grid;
    grid-template: repeat(3, 40px) / repeat(3, 40px);
  }
}


/*Larger than 1200 px*/

@media (min-width: 1200px) {
  main>.col {
    display: grid;
    grid-template: repeat(3, 70px) / repeat(3, 70px);
    width: 210px;
    padding: 0;
  }
  .container {
    width: 630px;
    padding: 0px;
    top: 0%;
  }
  footer {
    height: 210px !important;
    margin-top: 25px;
  }
  .option1>.col {
    height: 180px;
    width: 180px;
    display: grid;
    grid-template: repeat(3, 60px) / repeat(3, 60px);
  }
  main {
    grid-template: repeat(3, 210px) / repeat(3, 210px);
    margin-top: 2%;
    height: 630px !important;
  }
}

.option1 {
  height: auto;
  width: auto;
  border: 1px solid red;
  padding: 0;
  z-index: 2;
}

.col {
  border: 2px solid #5F9EA0;
  padding: 0;
  overflow: hidden;
}

.col>* {
  border: 1px solid #ADD5D6;
}

.option1>.col>* {
  /*    z-index: 2;
    position: absolute;*/
}

.option1>* {
  border: 1px solid black;
}


/*.one > *{
    height: 70px;
    width: 70px;
    padding: 0;
    margin: 0;
}*/


/*.one{
    border: 1px solid red;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
    padding: 0;
}
.two{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.three{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.four{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.five{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.six{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.seven{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.eight{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}
.nine{
    border: 1px solid red;
    display: grid;
    grid-template: auto auto auto / auto auto auto;
}*/


/*.i{
    border: 1px solid blue;
}
.ii{
    border: 1px solid blue;
}
.iii{
    border: 1px solid blue;
}
.iv{
    border: 1px solid blue;
}
.v{
    border: 1px solid blue;
}
.vi{
    border: 1px solid blue;
}
.vii{
    border: 1px solid blue;
}
.viii{
    border: 1px solid blue;
}
.ix{
    border: 1px solid blue;
}*/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<footer >
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</footer>

CodePudding user response：

Ah i found it. In the css of the footer, overflow was hidden and dis wasnt showing outsite of the parent element. Classic one line that is hard to find and causing all the drama.