滚动后，使悬停的div保持在原来的位置

时间：2019-05-26 17:24:31

标签： html css

当用户将鼠标悬停在一个“正方形”上时，会出现一个div，但是当用户滚动以访问离底部最远的正方形时，现在显示的div看起来处于另一个位置。

我知道它每次都出现在同一位置，但是我希望在屏幕上具有固定的位置，即使用户滚动时也是如此。

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

这是一个片段：

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;



}
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="styles/testingcss.css?v=1.0">
   </head>
   <body>
  <div class="squarecontainer" id="squarecontainer">
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
     </div>
     <div class="square">
        <div class="optionhover"></div>
        <div class="squarehover">
        </div>
        <
     </div>
  </div>
   </body>
</html>

1 个答案:

答案 0 :(得分：2)

欢迎使用StackOverflow（我可以告诉您是新手）。欢迎来到科德书呆子之乡，总之回到您的问题：

所以，您的代码对我来说有点令人困惑>。<我要重写一下。

如果您像我一样，则可能不在乎实际完成了什么。所以我先给您工作代码，然后再告诉您原因。

（这两个是同一件事）

首先，这里是JSFiddle：https://jsfiddle.net/xfh2Ldov/

第二，这是代码：

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;
}
<div class="squarecontainer">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="squarehover"></div>
</div>

因此，基本上，我只是添加了position: fixed并简化了代码，使其从“可以正常工作，但我只是将一堆字母组合在一起，然后将其变成一大段代码”，改为“可以正常工作，我仔细定位了每个字母到一小段代码”

查看您拥有的代码，您可以简单地看到它只是从实际代码中提取的代码。所以...您可能需要添加一些内容才能使其按您希望的方式工作

说明：

所以...

position: fixed允许div（或任何其他元素）在网页上保持固定，即使您滚动也是如此。很好的例子：https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

position: absolute允许div ...很好，因为您在代码中使用了position：绝对值，所以我只能假设您知道它的作用。

position: sticky是位置固定的，也是位置绝对的宝贝。它就像是绝对的，直到即将离开页面视图，然后卡在底部/顶部。很好的例子：https://www.w3schools.com/howto/howto_js_sticky_header.asp

相关问题
最新问题