绝对定位 position, fixed
首先了解一下绝对定位,是指在一个网页当中该模块不会随着网页的滚动而滚动
例如:百度的搜索,百度的这一个模块是不会滚动的
而这个具体怎么做呢?举一个简单的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fixed</title>
</head>
<style type="text/css">
#id1{
width: 400px;
height: 50px;
background: springgreen;
font-family: 华文行楷;
font-size: 25px;
float: left;
position: fixed;<--在这个地方加入css的绝对定位属性即可-->
margin-left: 30px;
margin-top: 40px;
}
.div1{
width: 500px;
height: 900px;
background: darkturquoise;
}
.div2{
width: 500px;
height: 900px;
background: bisque;
}
</style>
<body>
<div id="id1">fixed绝对定位</div>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
上面简单的定义了3个div块,而第一个div块是使用了绝对定位,其他两个div块将网页拉长或者拉宽,3个div块的颜色都不相同。不会随着网页的滚动而滚动,
最开始的效果未滚动![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/07bb131bf3377aa8124fd7f06f7a5839.png)
滚动后的效果
同理百度的搜索,本质上区别不大,自己再继续美化一下。