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

Question

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 class="container">
  <div class="container option1">
    <div class="col">
      <div class="b1"></div>
      <div class="b2"></div>
      <div class="b3"></div>
      <div class="b4"></div>
      <div class="b5"></div>
      <div class="b6"></div>
      <div class="b6"></div>
      <div class="b7"></div>
      <div class="b8"></div>
    </div>
  </div>
</footer>

generally if you want something appear "above" everything else then you give it a higher z-index (in the CSS) — ADyson, Mar 03 '22 at 22:29
It does given the example code in your question - as you can see from my answer below. — Rory McCrossan, Mar 03 '22 at 22:34
this is what you want? https://stackoverflow.com/questions/14155503/draggable-element-hidden-outside-container — dangerousmanleesanghyeon, Mar 04 '22 at 01:11
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. — Vaggelaras, Mar 03 '22 at 23:34

score 1 · Answer 1 · answered Mar 03 '22 at 22:33

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 class="container">
  <div class="container option1">
    <div class="col">
      <div class="b1"></div>
      <div class="b2"></div>
      <div class="b3"></div>
      <div class="b4"></div>
      <div class="b5"></div>
      <div class="b6"></div>
      <div class="b6"></div>
      <div class="b7"></div>
      <div class="b8"></div>
    </div>
  </div>
</footer>

What im trying to do is make the div that is red show on top of the footer. In the answer above the div is still going "under" the footer — Vaggelaras, Mar 03 '22 at 22:38

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

1 Answers1