Html CSS中一个框后面的另一个框
当顶部的按钮移动时，我不想让大盒子移动。框将包含文本，但在按钮悬停时，框将移动。有办法解决这个问题吗？我使用的代码如下：Html CSS中一个框后面的另一个框,html,css,Html,Css,当顶部的按钮移动时，我不想让大盒子移动。框将包含文本，但在按钮悬停时，框将移动。有办法解决这个问题吗？我使用的代码如下： <html> <title>Website</title> <head> <style> body { background: url(bg.png); background-size: cover; backgr
<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>
网站
身体{
背景：url（bg.png）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.按钮{
浮动：左；
顶部：100px；
文字装饰：无；
文本对齐：居中；
颜色：#000000；
文本阴影：0 2px 2px#333333；
字体系列：“漫画无MS”，草书，无衬线；
边界半径：8px；
填充：35px 32px；
背景：url（“pic.png”）；
背景重复：无重复；
过渡：全部缓进缓出250ms；
}
.按钮：悬停{
浮动：左；
顶部：100px；
文字装饰：无；
文本对齐：居中；
填充：68px 32px；
字体系列：“漫画无MS”，草书，无衬线；
边界：无；
显示：块；
}
.b-pos{
边缘顶部：50px；
左边缘：34%；
}
.盒子{
浮动：左；
顶部：100px；
文字装饰：无；
文本对齐：居中；
颜色：#000000；
文本阴影：0 2px 2px#333333；
字体系列：“漫画无MS”，草书，无衬线；
边界半径：8px；
左边距：80px；
利润上限：190px；
宽度：1000px；
高度：500px；
背景重复：无重复；
过渡：全部缓进缓出250ms；
盒影：0-8px 8px-6px黑色，0-8px 8px-6px黑色，-8px 0-8px-6px黑色，插入0px 0px 10px 0px 000000；
}
所有需要的代码都在上面。我认为不需要背景。只需添加：
位置：固定
在css框中，它不会移动
fixed属性
表示元素相对于浏览器窗口定位。因此，当按钮悬停在其上时，无论上述移动如何，它都将保持在原来的位置
您也可以在此处使用position:absolute
。绝对表示元素相对于其第一个定位（非静态）的祖先元素进行定位。您需要将按钮或框从正常的HTML流中取出。您可以通过将的CSSposition
属性（例如.box
设置为absolute
或fixed
）来实现这一点
.box {
position: absolute;
}
这会将箱子“锁定”到位