Question

所以我正在尝试制作与页面一起滚动的横幅，但总是会像我的包装器一样留下40px。这是我的网站：http://joostmeijer.eu/，因此您可以看到我的HTML工作原理。我真的不知道如何使横幅div固定但相对于我的包装。

Answer 1

您可以在<div> div中创建wrapper，例如<div id="fixedwrapper"></div>，然后按照以下方式设置样式：

div#fixedwrapper {
     display: block;
     width: 140px;
     height: 500px;
     position: fixed;
     left: 0px;
     background: black;
}

以下是一个实例： jsFiddle Demo 。虽然由于您的网站没有响应，您需要使用CSS3 @media-queries来删除窗口大小，因为一旦窗口大小减小，横幅就会与您的内容重叠。

Answer 2

你在这个问题上自相矛盾。如果div具有固定位置，它将相对于浏览器屏幕定位，因此它永远不会移动。

解决方案：

如果您不想更改html并将横幅保留在div中，则可以应用负边距。确保包装器上的溢出设置为可见（默认值），以使其正常工作。通过将负边距中的像素添加到#banner div的宽度，也可以使图像更宽，以填补右侧创建的间隙。

#banner{
  background-color: blue;
  height: 100px;
  width: 540px; /*40px added to compensate for margin*/
  margin-left: -40px; /*move the dic 40 px to the left from the div*/
}

Here it is in JSFiddle.

这是你想要做的吗???

修复了我的包装旁边的横幅？

2 个答案: