我成功地将“选择”按钮显示在div中我想要的位置。但很快我意识到,它只有当我悬停在它上时才能工作(我正在试验悬停和在div上定位),但没有悬停的3个按钮只出现在一个特定的位置,我不明白为什么它会在那里。
也许你们知道这个问题的答案谢谢
对不起,这里的代码很乱,我很新。
code snippets
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
header {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
display: flex;
}
li {
list-style: none;
padding: 15px;
}
#header-img {
display: flex;
width: 50px;
height: 50px;
}
@media screen and (max-width: 600px) {
#video {
width: fit-content;
}
}
#container {
width: 80%;
margin: 200px auto 200px auto;
display: flex;
justify-content: space-around;
}
.choices {
background-color: rgb(241, 241, 111);
width: 250px;
height: 400px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
}
.choices .pilih {
position: absolute;
left: 40%;
top: 350px;
}
.choices:hover {
transform: scale(1.5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
}
</style>
<title>Document</title>
</head>
<body>
<header id="header">
<img src="https://png.pngtree.com/element_pic/16/05/30/11574bb301599cc.jpg" alt="" id="header-img">
<nav id="nav-bar">
<ul>
<li><a href="#video" class="nav-link">Features</a></li>
<li><a href="#video" class="nav-link">How it works</a></li>
<li><a href="#video" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<div id="container">
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
</div>
</body>
</html>
1条答案
按热度按时间66bbxpm51#
1.当您设置任何元素位置:absolute时,它设置其相对于body的位置(默认情况下)。
1.在你的例子中,要相对于特定容器进行定位,你需要将它的父容器(带有类选项)设置为“position:相对”