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. C# winform DevExpress上传图片到数据库【转】

    实现功能如下图: 注明:此文使用的是DevExpress控件,winform 原生控件也是一样使用方法. 1.点击选择图片按钮,功能为通过对话框选择要上传的文件,并将该文件在下面的PictureEdi ...

  2. [leetcode]Subsets @ Python

    原题地址:https://oj.leetcode.com/problems/subsets/ 题意:枚举所有子集. 解题思路:碰到这种问题,一律dfs. 代码: class Solution: # @ ...

  3. sharding-jdbc之——分库分表实例

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/79368021 一.概述 之前,我们介绍了利用Mycat进行分库分表操作,Mycat ...

  4. vue组件的hover事件模拟、给第三方组件绑定事件不生效问题

    1.vue里面实现hover效果基本需要用事件模拟 <div @mouseover="overShow" @mouseout="outHide"> ...

  5. Laravel 5 中使用 JWT（Json Web Token） 实现基于API的用户认证

    在JavaScript前端技术大行其道的今天,我们通常只需在后台构建API提供给前端调用,并且后端仅仅设计为给前端移动App调用.用户认证是Web应用的重要组成部分,基于API的用户认证有两个最佳解决 ...

  6. 【Java】Java-XML解析利器-SAX-高性能-易用

    Java-XML解析利器-SAX-高性能-易用 java xml 大_百度搜索 (3)java处理比较大的xml文件 - SegmentFault How to read UTF-8 XML file ...

  7. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（二十五）Structured Streaming：同一个topic中包含一组数据的多个部分，按照key它们拼接为一条记录（以及遇到的问题）。

    需求: 目前kafka的topic上有一批数据,这些数据被分配到9个不同的partition中(就是发布时key:{m1,m2,m3,m4...m9},value:{records items}),m ...

  8. JPA（四）：EntityManager

    Persistence Persistence类使用于获取EntityManagerFactory实例,该类包含一个名为createEntityManagerFactory的静态方法. // 创建En ...

  9. error MSB6006: "CL.exe" exited with code -1073741819.

    编译一个c++项目的时候,会报如下的错误,总是无法编译,是怎么回事? error MSB6006: "CL.exe" exited with code -1073741819. 搜 ...

  10. artTemplate子模板include

    art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...