Question

我遇到了嵌入旋转木马的背景图片的问题。 click here我注意到当我从一张幻灯片点击到另一张幻灯片时，我网站上的背景图片移动到了原位。我的轮播的margin-top当前设置为margin-top:-275px;，背景图片设置为margin-top:-64px;我对这些设置略感担忧。

有没有人能解决这个问题？

要激活幻灯片，请单击导航栏下的细红色标签

Answer 1

我猜那是因为你有

.rslides li {
  top:0;
}

它对position:relative没有任何作用（并且当前幻灯片有它），但它会随着position:absolute（隐藏幻灯片）向下滑动。

当您点击一个标签时，会有一个时间点新标签淡入，但它还没有position:relative。然后，在那一刻，新幻灯片不在您想要的位置。

所以删除该行。

Answer 2

正在进行跳转是因为您在动画切换结束时将LI项目从position: absolute;切换为position: relative;。删除CSS规则可以避免这种情况：

.rslides li { left: 0; top: 0; }

指定width和height很好，但只要您指定left和top - 然后从相对位置切换到绝对位置，就可以获得“跳跃”重看。

至于每个面板的位置 - 它与您布置盒子的方式有关。您指定的尺寸对于您提供的内容来说不够大。例如：<div id="header">为37px高，这是社交媒体按钮的合适大小，但您也将其作为#nav-menu UL的容器 - 这是另一个102px高。

似乎为了纠正这个并使事情重叠，你使用了负边距 - 这会让你全部被抛弃。

我的建议是使用标准化的布局系统，例如以下任何一种：

并使用它来执行布局任务，而不是尝试使用混合绝对/相对定位自行设计重叠图层。

或者，如果您要去重叠层路线（再次，未建议），请真正承诺。在整个布局中绝对定位。

为了实现这一目标，您可以考虑使用CSS规则：

#header {
    display: block;
    position: absolute;

    left: 50%; top: 0px;
    height: 139px; /* Your Social media links height + nav buttons height */
    width: 1018px; /* Your current width */
    margin-left: -509px; /* Half the width - centers on page */
}

再一次 - 这是更多的工作，更难以维护，更不优雅 - 但至少会产生一致的间距/尺寸。

使用jquery滑块的css边距问题

2 个答案: