我不希望顶部的按钮移动时大框移动。该框将包含文本,但是在按钮悬停时,该框将移动。有任何解决这个问题的方法吗?我在下面使用的代码:
<html>
<title>Website</title>
<head>
<style>
body {
background: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.button {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
padding:35px 32px;
background: url("pic.png");
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
}
.button:hover {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
padding:68px 32px;
font-family: "Comic Sans MS", cursive, sans-serif;
border:none;
display: block;
}
.b-pos {
margin-top:50px;
margin-left:34%;
}
.box {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
margin-left: 80px;
margin-top: 190px;
width: 1000px;
height: 500px;
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, -8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;
}
</style>
</head>
<body>
<div class="b-pos">
<a href="#" class="button" style="box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, -8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;">Home</a>
<a href="#" class="button" style="box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, inset 0px 0px 10px 0px #000000;">Sales</a>
<a href="#" class="button" style="box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, 8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;">About</a>
</div>
<div class="box">
</div>
</body>
</html>
上面需要的所有代码。我认为不需要背景。
最佳答案
您需要从常规HTML流程中删除按钮或框。您可以通过将CSS的position
属性(例如.box
设置为absolute
或fixed
)来实现。
.box {
position: absolute;
}
这会将框“锁定”到位。