使用CSS固定元素

Question

我有一个固定的div＆＃34; hovering＆＃34;通过position: fixed在我网站的其余部分之上。然而，当其他网站元素（即文本）出现在悬停元素后面时，这很难看。我想隐藏元素，当它们位于悬停元素后面时，意味着只显示它背后的网站背景。

因为渐变中的网站背景，我不能简单地给浮动元素提供它自己的背景。有没有办法做到这一点？

＆＃13;

＆＃13;

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

＆＃13;

<div id="fixed">
Some Text
</div>

<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：澄清一下：我希望固定元素的背景与固定元素当前所在的网站背景相同。我不想把固定元素放在所有其他内容之上。

Answer 1

我能看到这样做的唯一方法是为文本设置滚动框，并在页面顶部保留固定元素（不再需要修复）

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  overflow: hidden;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

#text{
    margin-top: 80px;
    height: 400px;
    overflow: auto;
    width: 400px;
}

<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>

Answer 2

要探索的另一条路线，可能是创建一个额外的“叠加”fixed元素，固定到viewport的所有4个角，并为其提供渐变背景，以及不透明度：

body {
  width: 200px;
  font-family: sans-serif;
  background: #fff;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  background: #fff;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  opacity: 0.5;
}

<div id="fixed">
Some Text
</div>

<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>
<div class="bg"></div>

Answer 3

试试这个！ ：）

＆＃13;

＆＃13;

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%);
}
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  width: 100% ;
height: 100%;
  display: block;
}

＆＃13;

<div id="fixed">
  Some Text
</div>
<div id="text">
  <script>
    for (i = 0; i < 50; i++) {
      document.write("Text text text text<br />")
    }
  </script>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

除了@sTx提供的内容之外，你还可以在webkit中隐藏这个尴尬的滚动条：

::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
display: none;
}

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  overflow: hidden;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

#text{
    margin-top: 80px;
    height: 400px;
    overflow: auto;
    width: 400px;
}

<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>

Answer 5

您可以插入＆＃34;背景颜色＆＃34;在#fixed in css。

Answer 6

我希望这是实现这一目标的唯一途径。

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}
#text{
  padding-top: 87px;
}
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
  background-color: #b4ddb4;
  width: 100%;
  height: 37px;
}

<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>