Make div from hover stay in its same position after scrolling

Question

I have a div that appears when the user hovers over one of the "squares", however when the user scrolls to access the squares furthest away from the bottom, the div that's appearing now looks to be in another position.

I know it appears in the same spot each time, but I'd like to have a fixed position on screen, even when the user scrolls.

JSFiddle: https://jsfiddle.net/6j1nhxy4/

Here's a snippet:

body {


}

.squarehover {
  visibility: hidden;
position: absolute;
left: 130%;
top: -0%;
background-color: white;
height: 200px;
width: 200px;
z-index: 999999999999999999999999999999;
-webkit-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);


}


.hovercontainer {

  position: absolute;
    left: 50px;
    overflow: overlay;
    top: -164px;
    height: 300px;
    /* opacity: 0; */
    /* visibility: hidden; */
    background-color: none;
    z-index: 2;
    /* margin-bottom: 100px; */
    width: 500px;
}

.squarecontainer {
  position: absolute;

      display: flex;
      width: 100%;

      flex-wrap: column-reverse;

      flex-direction: column-reverse;
      height: 95%;

      overflow-y: scroll;
      overflow-x: hidden;

      z-index: 99999;
      margin-left: auto;
      margin-right: auto;
}



.square {
    transition: 0.3s ease-in-out;
    width: 1px;
    height: 1px;

    /* position: relative; */
    /* top: -36%; */
    /* margin-bottom: 20px; */
    /* float: left; */
    /* left: 30.35%; */
    color: grey;
    background-color: grey;
    /* text-align: center; */
    /* cursor: pointer; */
    /* overflow: auto; */
    -webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
    -moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
    box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
    /* z-index: 99999999; */
    /* display: flex; */
    /* justify-content: flex-end; */
    /* flex-direction: column; */
    max-height: auto;
    /* overflow-y: scroll; */
    /* flex: 1 1 300px; */
    /* flex: 1; */
    margin-bottom: 20px;
    top: 0px;
    padding: 0.9em;
    margin-right: auto;
    margin-left: auto;
    /* border: 1px dashed green; */

      }


      .square:hover .squarehover {

        visibility: visible;
        z-index: 999999999999999999999999999999;
        position: absolute;
        margin-left: 50px;
        margin-bottom: 50px;
        left: 5%;
        background-color: none;

      }


.squarewrapper {
  position: relative;
top: 0;
bottom: 0;
left:0;
  display: inline-flex;
   width: 50px;
   flex-direction: row;
   flex-wrap: wrap-reverse;  /* ADJUSTED */
   height: 650px;



}

Tigerrrrr · Accepted Answer

Welcome to StackOverflow (I can tell you're new). Welcome to the land of Coding Nerds, lel, anyways back to your question:

So, Your code is a little bit confusing for me >.< I'm gonna rewrite it a bit.

If you're like me, you probably don't care what has actually been done. So I'll give you the working code first, then tell you the reason afterwards.

(These two are the same thing)

Firstly, here's the JSFiddle: https://jsfiddle.net/xfh2Ldov/

Secondly, here's the code:

body {
  margin: 0;
}

.squarehover {
  display: none;
  position: fixed;
  top: 5vh;
  left: 5vw;
  background-color: white;
  height: 200px;
  width: 200px;
  z-index: 999999999999999999999999999999;
  -webkit-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
  box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
}

.squarecontainer {
  width: 100vw;
  height: 95vh;
  margin: 0 auto;
}

.square {
  width: 28px;
  height: 28px;
  background-color: grey;
  -webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
  -moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
  box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
  top: 0px;
  margin: 10px auto;
}

.square:hover ~ .squarehover {
  display: block;
}

So basically, I just added position: fixed and simplified your code from "this works but I kinda just put a bunch of letters together and turned it into a large chunk of code" to "this works and I carefully positioned each letter to a really small chunk of code"

Looking at the code you had, you can simply see that it was just code pulled out from your actual coode. So... you may have to add in some bits to make it work how you want it to work

Explanation:

So...

position: fixed allows the div (or any other element) to stay fixed on the webpage even if you scroll. Good Example: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

position: absolute allows the div to... well, since you used position: absolute in your code, I can just assume you know what it does.

position: sticky is position fixed and position absolute's baby. It acts like absolute until its about to leave the page view and then gets stuck at the bottom/top. Good Example: https://www.w3schools.com/howto/howto_js_sticky_header.asp

Make div from hover stay in its same position after scrolling

Answers (1)

Related Questions