javascript - Nivo Slider Thumbnail / ControlNav 未定位在滑块内

Question

这是我第一次尝试 Nivo Slider，所以请耐心等待——

我正在尝试将我的 controlNav 缩略图定位在滑块内（我希望它在中心，距离滑块底部 15px），但到目前为止使用position:absolute和left和top属性只是使缩略图位置的整个定位围绕身体而不是滑块。

难道我做错了什么？我正在网上寻找解决方案，但我找不到任何解决方案。也许我正在搜索错误的关键字？

我正在测试它的网站是[链接已删除]。我已将缩略图重置为位于滑块下方居中的原始布局，如果您想在控制台内摆弄它会更容易。

score 3 · Accepted Answer

如果当您说“缩略图”时，您的意思是小寻呼机图标，那么您可以将 css 更改为：

#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}

在这里，我删除了 display:block ，您可以将 40px 调整为适合您的布局需求。

score 1 · Accepted Answer

在您的 CSS 中，将positioning 属性设置为 on.nivo-control而不是nivo-controlNAV.

通过添加到您的以下内容，这对我有用<head>：

<style type="text/css">
    .nivo-control {
        position:relative;
        top:-45px;
    }
</style>

score 0 · Accepted Answer

啊，看起来我在@aditya 和@mToce 的答案的帮助下找到了答案。

似乎我忘记了将 #front-showcase 定位为相对元素，从而使 controlNav 使用 body 元素而不是滑块元素定位自身。

有关更多信息，请阅读以下内容：

我通过输入 position:relative; 解决了这个问题。在我的#front-showcase 中，输入位置：绝对；在 .controlNav 内。

希望这可以帮助！

3 回答 3