我目前正在使用 HTML/CSS 添加 Javascript slick slider 来创建我的网页。我目前正在为我的画廊选项卡使用常规 slider 代码，但是，我以前的箭头按钮 (.slick-prev:before) 淹没在我的 div 类“slider_1”后面，而我的 .slick-next:before 箭头应该如何工作舒适地坐在 div 之外。
我在 .slick-prev:before 中添加了 margin 和 padding，但是它只会将箭头推到 div 中的视线之外。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>我希望能够让我以前的箭头在 slider div 之外变得可操作。因为目前箭头只是位于 slider 内我的图像后面，没有任何作用。
最佳答案
理解: 阅读您的问题后，我觉得您遇到了图层问题，因为您的下一个和上一个按钮隐藏在其他网络元素后面。
解决方案: 我们可以编写一些 CSS 来告诉它把层位置更改为更高的层数，为此我们使用 CSS 使用 Z-Index 属性并分配一个较高的数字(例如 99)以确保它位于高于网页上的所有其他元素。
要使用 z-index，我们必须指定一个 position 属性，其值为 fixed、absolute 或 relative。
在我的示例中，我使用了相对值，因此它不会篡改箭头最初定位的位置。
要尝试的代码:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
但是，如果您发现代码只影响您的 1 个 slider ，那么您可能需要向 slider HTML 添加一个 ID 并按如下方式编写 CSS:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
然后更改受影响的 slider 的 HTML，使其中也包含 ID
<div class="slider1" id="slider1">
关于javascript - 我如何重新定位我以前的光滑箭头以使其可操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54326122/