jQueryのbxSliderを要素の上に被せたい。
解決したいこと
jQueryのbxSliderを他のすべての要素の上に配置したい
例）
jQueryのbxSliderをページの中の他の要素の上に配置したいのですが、position: relative;を適用してもうまく位置が変わりません。
発生している問題・エラー
特にエラーは出てません
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<title>M Y S T E R Y</title>
</head>
<body>
<div class="pic">
<img src="mystery_scr.png" class="mystery">
<img src="arrow.png" class="arrow">
</div>
<div class="text">
<input type="text" placeholder="パスコード入力欄" id="answer">
<p class="check_button" onclick="check_word()">Check</p>
<p id="message" class="d-none"></p>
<div id="finish-pic">
<li><img src="finish1a.png" id="finish1a"></li>
<li><img src="finish1b.png" id="finish1b"></li>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
例）
body {
background-color: black;
}
#finish-pic {
display: none;
}
.pic {
text-align: center;
}
.mystery {
width: 55%;
padding-top: 10%;
padding-right: 1%;
}
.arrow {
display: flex;
margin: auto;
width: 15%;
padding-top: 2%;
}
.text {
text-align: center;
position: relative;
}
#answer {
margin-top: 2%;
max-width: 65%;
background-color: black;
padding: 35px;
width: 75%;
border: 0;
outline: none;
border-bottom: white 1px solid;
font-size: 100%;
color: white;
letter-spacing: 6px;
}
.right-arrow {
width: 5vh;
vertical-align: middle;
}
.check_button {
display: flex;
flex-direction: column;
margin-top: 10px;
font-size: 55px;
border: 0;
color: white;
cursor: pointer;
font-family: "超極細ゴシック";
}
.d-none {
display: none;
}
#message {
color: rgb(255, 110, 110);
}
let element = document.getElementById("answer");
let message = document.getElementById("message");
let finishPic = document.getElementById("finish-pic");
let finish1a = document.getElementById("finish1a");
function messageError() {
message.classList.remove("d-none");
message.innerText = "認証失敗";
setTimeout(function() {
message.classList.add("d-none");
}, 3000);
}
window.document.onkeydown = (e) => {
if (e.keyCode === 13) {
switch (element.value.toLowerCase().replace(".","")) {
case "kst":
alert("kst");
break;
case "drp":
$(document).ready(function() {
$("#finish-pic").fadeIn(1000, function() {
$("#finish-pic").bxSlider({
auto: false,
infiniteLoop: false,
pager: false
});
});
})
break;
default:
messageError();
break;
}
}
}
function check_word() {
switch (element.value.toLowerCase().replace(".","")) {
case "kst":
alert("kst");
break;
case "drp":
alert("drp");
break;
default:
messageError();
break;
}
}
id=finish-pic の要素をすべての要素の上に被せたいです。
html, css, jsの初学者でコードが大変読みづらいとは思いますが、回答していただけると幸いです。
0 likes
