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. solr建立pdf/word/excel索引的方法

    PS: 本文假设你已经成功的搭建了一个Solr服务器步骤如下:(1)准备好一份Solr的源码,假设现在保存在c:\apache-solr-1.4.1\目录下(2)从https://issues.apa ...

  2. VS2010新建Web网站与新建Web应用程序的区别 (转)

    在Visual Studio 2010中,除了可以使用“创建Web应用程序”的方式来构建自己的Web项目之外,还可以通过创建“Web网站”的方式来构建Web项其中,Web网站的创建方法:打开Visua ...

  3. Search Insert Position leetcode java

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  4. Create an Android library

    官方文档 创建 Android 库 [Create an Android library] Android 库在结构上与 Android app module 相同.它可以提供构建应用所需的一切内容, ...

  5. JavaScript中textRange对象使用方法总结

    TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本.文本范围让您可以选择性的将字符.单词和句子从文档中挑选出来.TextRange对象 ...

  6. 基于CRF的中文分词

    http://biancheng.dnbcw.info/java/341268.html CRF简介 Conditional Random Field:条件随机场,一种机器学习技术(模型) CRF由J ...

  7. 如何把本地代码提交到git(码云)、github代码管理项目上

    前提必须安装了git工具 以下命令操作都是通过git bash操作. 将本地代码提交到码云空项目操作: D:\>mkdir inek_winprop D:\>cd inek_winprop ...

  8. capwap学习笔记——初识capwap（四）

    2.5.7 CAPWAP传输机制 WTP和AC之间使用标准的UDP客户端/服务器模式来建立通讯. CAPWAP协议支持UDP和UDP-Lite [RFC3828]. ¢ 在IPv4上,CAPWAP控制 ...

  9. 国内A股16家上市银行的財务数据与股价的因子分析报告（1）（工具：R）

    分析人:BUPT_LX 研究目的 用某些算法对2014年12月份的16家国内A股上市的商业银行当中11项財务数据(资产总计.负债合计.股本.营业收入.流通股A.少数股东权益.净利润.经营活动的现金流量 ...

  10. 【Python】torrentParser1.00

    代码: #------------------------------------------------------------------------------------ # torrentP ...