大家好，欢迎来到IT知识分享网。
文章目录
一、固定定位概念语法
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方 ;
固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 ” 浏览器可视窗口 + 边偏移 ” 进行定位 ;
- 固定定位 与 父元素没有任何关系 ;
- 固定定位 与 滚动条滚动没有任何关系 ;
固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ;
注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ;
固定定位 的 本质是一种 特殊的绝对定位 ;
固定定位语法 :
选择器 {
position: fixed; left: 0px; top: 0px; }
固定定位元素举例说明 : 在下面的网站 , 顶部的导航栏 , 与 右侧的 三个按钮 , 就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ;
低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ;
二、固定定位代码示例
在上一篇博客【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )
代码的基础上 , 将中心的标准流元素设置为 固定定位 元素 ;
为 body 设置高度 1000px , 方便进行滚动条滚动 ;
代码示例 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位示例</title> <style> /* 设置高度 1000 像素, 方便滚动设置 */ body{
height: 1000px; } /* 最外层 父容器盒子 */ .box {
/* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width: 300px; height: 200px; /* 边框 1 像素实线 */ border: 1px solid #ccc; /* 上下设置 100 像素外边距 水平居中 */ margin: 100px auto; /* 子元素与 */ padding: 10px; background-color: pink; } /* 固定定位元素 */ .center {
width: 300px; height: 200px; background-color: purple; /* 设置其为浏览器视口 固定定位 */ position: fixed; left: 0px; top: 0px; } /* 绝对定位元素 - 左上角 */ .top {
/* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器左上角 */ /* 上边偏移 0 紧贴顶部 */ top: 0; /* 左边偏移 0 紧贴左侧 */ left: 0; /* 内容尺寸 */ width: 80px; height: 80px; background-color: blue; } /* 绝对定位元素 - 右下角 */ .bottom {
/* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /* 下边偏移 0 紧贴底部 */ bottom: 0; /* 右边偏移 0 紧贴右侧 */ right: 0; /* 内容尺寸 */ width: 80px; height: 80px; background-color: red; } </style> </head> <body> <div class="box"> <div class="top"></div> <div class="center"></div> <div class="bottom"></div> </div> </body> </html>
展示效果 :
- 默认进入后的样式 :
- 滚动拖动条后的效果 :
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/120389.html
