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的相关用法的更多相关文章

  1. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

  2. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  3. css中table-layout:fixed 属性的用法

    table-layout:fixed 属性的用法:如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字 不撑破表格的目的,一般是 ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  7. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  8. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  9. 深入理解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 ...

随机推荐

  1. ArcGisServer根据最大最小坐标换算瓦片行列号【转】

    1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题 ...

  2. 基于单个 div 的 CSS 绘图

    为什么只使用一个 Div? 2013年5月,我参加了 CSSConf,看到了Lea Verou 关于 border-radius 的演讲,你可能会认为这个属性很不起眼.但是这个演讲让我大开眼界,认识到 ...

  3. MongoDB server side Javascript 如何直接传入字符串？

    MongoDB server side Javascript的介绍如下: https://docs.mongodb.com/v3.0/core/server-side-javascript/#runn ...

  4. POJ 3009：Curling 2.0 推箱子

    Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14090   Accepted: 5887 Desc ...

  5. Auty 2017——WebMonitor接口本地检测平台

    转载:http://www.cnblogs.com/LanTianYou/p/6272484.html#_label0_0 目录 2016Auty诞生 2017一个新的开始 WebMonitor接口本 ...

  6. IT行业简报 2014-2-8

    1.微信在“我的银行卡”页面接入嘀嘀打车,三天内微信打车突破10万单,日均订单为70万,其中微信支付订单超过48万单2.三大运营商手机支付用户仅366.3万,与腾讯单月发展手机支付用户500万户相比, ...

  7. JAVA Eclipse如何导入已有的项目

    File-Import,然后在弹出的窗口中输入exit,会自动提示下面的选项(已存在的项目)   把项目源代码放到Eclipse的工作目录,然后找到   导入完成    

  8. C#.NET常见问题(FAQ)-如何设置控件水平对齐，垂直对齐

    如果要设置一些控件垂直对齐,点击这个按钮   如果要设置水平对齐,则点击这个按钮,选中控件之后点击左对齐(多个按钮都试下吧,总归能对齐到你要的效果的)   更多教学视频和资料下载,欢迎关注以下信息: ...

  9. LintCode: Count and Say

    C++ class Solution { public: /** * @param n the nth * @return the nth sequence */ string countAndSay ...

  10. JavaScript 之 动态加载JS代码或JS文件

    2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var ...