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. Go语言之进阶篇服务器如何知道用户需要什么资源

    1.服务器如何知道用户需要什么资源 示例: package main import ( "fmt" "net" ) func main() { //监听 lis ...

  2. 基于ZigBee和STM32的智能家居控制系统的设计与实现(三)

    基于ZigBee和STM32的智能家居控制系统的设计与实现(三) 自从前两篇博客介绍了智能家居系统的基本实现机理后,收到了好多朋友的来信,和我讨论了好多的这方面的知识,在此很高兴,虽然自己做的这个所谓 ...

  3. LigerUi之Grid使用详解（二）——数据编辑

    一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.所以上一篇文章为大家介绍了LigerGrid的显 ...

  4. Android教你怎样一步步打造通用适配器

    前言 在Android开发中ListView是最为经常使用的控件之中的一个,基本每一个应用都会涉及到它,要使用ListView列表展示,就不可避免地涉及到另外一个东西--Adapter,我们都知道,A ...

  5. nodejs pipe实现大文件拷贝

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

  6. scikit-learn工具学习 - random,mgrid,np.r_ ,np.c_, scatter, axis, pcolormesh, contour, decision_function

    yuanwen: http://blog.csdn.net/crossky_jing/article/details/49466127 scikit-learn 练习题 题目:Try classify ...

  7. nod32的内网在线更新设置

    需要一个iis地址,最好能够目录浏览,权限够大. 还必须: 增加一个MIME类型,.ver,类型填写application/x-ver

  8. 【Python】列表（数组）的引用和拷贝

    # Python里对象赋值传递的引用 arr=[1,2,3,4,5] newArr=arr arr[1]=9 print('arr='+str(arr)) print('newArr='+str(ne ...

  9. Discuz常见小问题-如何安装模板，使用模板

    点击应用,获取更多插件 在模板页面中选择需要的类型(需要注册一个账号) 找好一个模板之后,点击安装应用(一般也会有演示) 安装完成之后可以在界面-风格管理中选择安装好的模板,选中新的模板,点击提交即可 ...

  10. spring MVC、mybatis配置读写分离，ReplicationDriver（转载）

    参考:http://shift-alt-ctrl.iteye.com/blog/2271730c 环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现 ...