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 ...
随机推荐
- 第二章 logstash - 输出插件之redis与es
最常用的两个输出插件: redis es 一.redis 1.用法 output { redis{ batch => false batch_events => 50 batch_time ...
- SQL Server 数据库性能优化
分析比较执行时间计划读取情况 1. 查看执行时间和cpu set statistics time on select * from Bus_DevHistoryData set statistics ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(二十)ES6.2.2 Client API
scala版本2.11 java版本1.8 spark版本2.2.1 es版本6.2.2 hadoop版本2.9.0 elasticsearch节点列表: 192.168.0.120 192.168. ...
- Oracle ODP.NET vs Microsoft MSDP
08年做项目时,用 VS 2005,写据库层还在用 MSDP(System.Data.OracleClient),但是当时由于要操作 XML 和二进制文件,所以又使用了 ODP.NET(Oracle. ...
- C#.NET常见问题(FAQ)-如何判断两个类是否相同类型
可以用is方法判断是否是一个类 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线论坛: http://csr ...
- C#.NET常见问题(FAQ)-如何让Listbox支持多选
把SelectionMode改成MultiExtended 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线 ...
- android中使用setOnKeyListener响应输入事件
在界面中添加一个EditText输入框控件,需要在输入时响应输入事件,可以使用setOnKeyListener() 事件: final EditText editText = findViewById ...
- Spring ActiveMQ Caused By: javax.jms.IllegalStateException: Connection closed
根据 http://www.cnblogs.com/yshyee/p/7448808.html 进行JMS操作时,发送跟监听放到不同的项目中进行时,出现以下异常信息: org.springframew ...
- Struts2学习笔记二:开发流程
一:创建项目,添加依赖包 二:在web.xml配置核心控制器 <filter> <filter-name>struts2</filter-name> <fil ...
- Linux日志文件utmp、wtmp、lastlog、messages
1.有关当前登录用户的信息记录在文件utmp中:==who命令 2.登录进入和退出纪录在文件wtmp中:==w命令 3.最后一次登录文件可以用lastlog命令察看: 4.messag ...