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. require.js 最佳实践【转】

    https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...

  2. 别再为了this发愁了：JS中的this机制

    题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对象.闭包.原型链继承等等,而这其中就包括颇让人费解的th ...

  3. Android -- Dialog动画

    window_in.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android ...

  4. AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法

    AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法 2018-01-18 16:13蚂蚁金服/雾霾/人工智能 导读:词向量算法是自然语言处理领域的基础算法,在序列标注.问答系统和机 ...

  5. 【大数据】下载Windows版本的Redis 转

    https://www.cnblogs.com/tommy-huang/p/6093813.html 下载Windows版本的Redis   1.打开官网http://redis.io/点击Downl ...

  6. nodejs pipe实现大文件拷贝

    原文: http://nqdeng.github.io/7-days-nodejs/ --------------------------------------------------------- ...

  7. GIT 如何合并另一个远程Git仓库的文件到本地仓库里某个指定子文件夹并不丢失远程提交记录？

    问题背景:     最近在重新整理手中的一个项目,目前该项目分为PC项目,手机项目,某第三方接口项目,第三方接口服务项目和手机项目     因为之前规划的原因,原来的四个项目是分两个解决方案来管理的 ...

  8. ASP入门（十）-Session对象

    在ASP中,有两个内部对象可以进行一些信息存储,它们是 Application 对象和 Session 对象,其中 Application 对象是对于整个应用程序期间而言的,它对于所有访问网站的用户来 ...

  9. Robotframework（1）：配置基础环境

    转载:http://www.cnblogs.com/CCGGAAG/p/7800324.html 最近对Robotframework这款基于python的框架比较感兴趣,于是想着来研究一下,下面我们来 ...

  10. [Canvas]游戏增加怪物爆炸效果，改善箭头形状

    请点此下载代码并用浏览器打开试玩. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-eq ...