CSS中position:fixed的相关用法
CSS中的三大重点知识:
1.float,浮动
2.盒子模型
3.position绝对定位
今天主要写下position中fixed相关知识:
position:static,relative,absolute,fixed
今天写一个吸顶式菜单,当浏览器滚动条向下滑动时!菜单随着页面向下滑动!
一开始以为用了absolute,这个大家也应该常用.发现效果是达到了~但发现有一个严重的问题是:向下滑动时这个浮动层会非常的抖动.很影响美观!
结果测试后发现了问题~
position:absolute是相对于整个网页的顶部定位的(外部容器为body的情况下)~
position:fixed是相对于网页的显示窗口定位的(外部容器为body的情况下)~
所以用position:fixed固定层随滚动条下滑时!效果很完美!
CSS中position:fixed的相关用法的更多相关文章
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- css中table-layout:fixed 属性的用法
table-layout:fixed 属性的用法:如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字 不撑破表格的目的,一般是 ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
随机推荐
- require.js 最佳实践【转】
https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...
- 别再为了this发愁了:JS中的this机制
题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对象.闭包.原型链继承等等,而这其中就包括颇让人费解的th ...
- Android -- Dialog动画
window_in.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android ...
- AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法
AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法 2018-01-18 16:13蚂蚁金服/雾霾/人工智能 导读:词向量算法是自然语言处理领域的基础算法,在序列标注.问答系统和机 ...
- 【大数据】下载Windows版本的Redis 转
https://www.cnblogs.com/tommy-huang/p/6093813.html 下载Windows版本的Redis 1.打开官网http://redis.io/点击Downl ...
- nodejs pipe实现大文件拷贝
原文: http://nqdeng.github.io/7-days-nodejs/ --------------------------------------------------------- ...
- GIT 如何合并另一个远程Git仓库的文件到本地仓库里某个指定子文件夹并不丢失远程提交记录?
问题背景: 最近在重新整理手中的一个项目,目前该项目分为PC项目,手机项目,某第三方接口项目,第三方接口服务项目和手机项目 因为之前规划的原因,原来的四个项目是分两个解决方案来管理的 ...
- ASP入门(十)-Session对象
在ASP中,有两个内部对象可以进行一些信息存储,它们是 Application 对象和 Session 对象,其中 Application 对象是对于整个应用程序期间而言的,它对于所有访问网站的用户来 ...
- Robotframework(1):配置基础环境
转载:http://www.cnblogs.com/CCGGAAG/p/7800324.html 最近对Robotframework这款基于python的框架比较感兴趣,于是想着来研究一下,下面我们来 ...
- [Canvas]游戏增加怪物爆炸效果,改善箭头形状
请点此下载代码并用浏览器打开试玩. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-eq ...