1、固定定位的概念
固定定位(fixed)的元素位置相对于浏览器窗口进行定位(会脱离文档流),即使页面滚动,固定定位元素不会随滚动条滚动,除非改变浏览器窗口的位置或大小
2、语法格式:
<head>
选择器{position: fixed;}
</head>
水平位置:
- left定位元素和定位元素的左边距离
- right定位元素和定位元素的右边距离
垂直位置
- top定位元素和定位元素的上边距离
- bottom定位元素和定位元素的下边距离
eg:
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="rdTzXTde-1729157059607" src="https://live.csdn.net/v/embed/429808"></iframe>盒子_固定定位
在视频中可以看出盒子3和盒子5在拖动滚动条时盒子不动,其他都会随着拖动滚动条时滚动。
运行代码:
<head>
<style>
div{
width: 120px;
height: 1 20px;
background-color: pink;
margin-bottom: 5px;
font-size:30px;
}
#div3{
background-color:aqua;
margin-bottom: 5px;
position: fixed;
left: 216px;
top: 216px;
}
#div5{
background-color: blue;
margin-bottom: 5px;
position: fixed;
left: 250px;
top: 250px;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div id="div3">盒子3(固定定位)</div>
<div>盒子4</div>
<div id="div5">盒子5(固定定位)</div>
<div>盒子6</div>
<div>盒子7</div>
<div>盒子8</div>
<div>盒子9</div>
</body>
3、固定定位的实际应用
(1)导航栏
固定定位常用于创建始终可见的导航栏。这样,用户可以在浏览页面时随时访问导航链接,提高用户体验
(2) 侧边栏
固定定位的侧边栏可以提供额外的信息或导航选项,而不会随着页面滚动而消失
(3)广告
固定定位的广告可以在页面上保持可见,增加广告的曝光率
标签:定位,盒子,bottom,小白刚,元素,重难点,固定,fixed From: https://blog.csdn.net/lz7_123/article/details/143022206