假如我想让一个盒子固定在我中部版心位置,应该怎么办呢?
方法如下:
没有定位之前,他们是普通的两个盒子,html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fixed.css">
</head>
<body>
<div class="nav"></div>
<div class="box"></div>
</body>
</html>
css(fixed.css)代码如下:
.box {
width: 800px;
height: 800px;
background-color: pink;
margin: 0 auto;
}
.nav {
width: 150px;
height: 300px;
background-color: powderblue;
}
此时的运行结果:
这不是我们想要的,我们想要小盒子靠在大盒子右部。应该怎么做呢?
只要改css就可以啦。。
css代码如下:
.box {
width: 800px;
height: 800px;
background-color: pink;
margin: 0 auto;
}
.nav {
width: 150px;
height: 300px;
background-color: powderblue;
position: fixed;
left: 50%;
margin-left: 400px;
}
运行结果如下:
设置大盒子高度更大,滚动条滚动的时候小盒子位置也不会变哟,这是你想要的效果吗?
方法总结:
- 在小盒子上设置固定定位先:position:fixed
- 让小盒子先占整个浏览器左边50%的距离。left:50%
- 再让小盒子距离大盒子左边距根据实际调整就好啦(大于等于大盒子宽度一半,则到大盒子右边啦)