html css sticky等

Question

对于下面的代码，我有两个问题：

1. 背景图片cereal.jpeg正在工作，现在由于某种原因，它消失了，我无法理解为什么。因为它曾经工作，我知道文件名和位置是正确的。

2. 我的控件拒绝保持粘性！

＆＃13;
＆＃13;
div.container {
  border-style: solid;
  border-width: thin;
  border-color: grey;
  box-shadow: 10px 15px 8px black;
  height: 1500px;
  width: 700px;
}

div.container::before {
  background-image: url("cereal.jpeg");
  background-repeat: repeat;
  opacity: 0.05;
}

div.controls {
  float: left;
  width: 140px;
  border: 1px solid lightgrey;
  position: -webkit-sticky; // Safari
  position: sticky;
  top: 0;
}

div.thePlots {
  float: left;
  border: 1px solid lightgrey;
  width: 400px;
  height: 1400px;
}
＆＃13;
<div id=container class=container>
  <div class=controls id=controls>
    <label id="brand">Brand:</label>
    <br>
    <select size=7 id="brandOptions" multiple>
      <option value=0 selected>All</option>
      <option value=1>Kellog</option>
      <option value=2>Post</option>
      <option value=3>Quaker</option>
      <option value=4>General Mills</option>
      <option value=5>Tree House</option>
      <option value=6>CPW</option>
    </select>

    <br><br><br>

    <label id="barsLabel">Error Bars:</label>
    <input id=barsPresent type=checkbox value="Error Bars" checked>

    <br><br><br>

    <label id="label">Elasticity<br>Means:</label>
    <br>
    <select id="plotY">
      <option value="efm" selected="selected">efm</option>
      <option value="enm">enm</option>
    </select>
    <br><br><br>
  </div>

  <div class=thePlots id=thePlots>
    The Plots<br>
    <div class="tooltip" id="tooltip"></div>
    <div id="plotshare" class="plotshare"></div>
    <div id="plotprice" class="plotprice"></div>
    <div id="plotsugar" class="plotsugar"></div>
    <div id="plotmushy" class="plotmushy"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

1. opacity太低了。
2. 删除float:left;

Answer 2

您的container元素一直很好，但它会粘在container元素的顶部。如果您将其放在// safari元素之外，您会看到它根据需要粘贴在页面顶部。

此外，您需要从css中删除/* comment */。在css中评论的正确语法是before

对于后台问题，您的背景没有内容可以显示在后面。您需要向#include <someFile.h>添加内容才能显示背景。

检查这个解决这两个问题的工作小提琴 ：https://jsfiddle.net/c5vrhf7t/1/