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. Longest Palindromic Substring leetcode java

    题目: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...

  2. cmd怎么删除Oracle数据库中的用户实例

    Oracle数据库使用过程中,针对系统都会建立独立的数据库用户,但有些时候处于测试或别的原因需要删除,原来的DB用户,这时我们可以使用下面的办法. 下属操作的前提是——确保数据库服务及监听均处于启动状 ...

  3. 屌丝就爱尝鲜头——java8总结晒一晒

    前两节讨论了那么多,这节就是两个议题,讨论了新增的日期的api,再说一说我的Java8的一些心得体会了. 首先,我们必须要搞清楚Java 8 为什么要增加新的日期的api,这是由于老的日期api非常的 ...

  4. 设置虚拟机IP

    重启虚拟机 重启后,查看虚拟机IP ip a 虚拟机已有自己的IP 输入虚拟机用户

  5. walmart weekly sales

    最近参加了kaggle的walmart weekly sales 预测比赛,已经过期但还能提交获得评分.Walmart Recruiting - Store Sales Forecasting 提供的 ...

  6. JAVA-jar包下载地址

    spring mvc常用jar包 commons-logging:http://commons.apache.org/proper/commons-logging/download_logging.c ...

  7. 用Jetty 9.1运行Java WebSockets微服务

    Jetty 9.1的发布将Java WebSockets (JSR-356) 带入了非Java EE环境,从而开启了微服务时代.我们可以将Jetty的容器包含在java应用程序中(注意,不是Java代 ...

  8. Android 八款开源 Android 游戏引擎

    原文地址 本文内容 Angle Rokon LGame AndEngine libgdx jPCT Alien3d Catcake 最近无意间看到一篇关于 Android 搜索引擎的文章,于是搜索了, ...

  9. SpringMVC验证框架Validation特殊用法

    基本用法不说了,网上例子很多,这里主要介绍下比较特殊情况下使用的方法. 1. 分组 有的时候,我们对一个实体类需要有多中验证方式,在不同的情况下使用不同验证方式,比如说对于一个实体类来的id来说,保存 ...

  10. SpringBoot添加对Log4j2的支持

    1.在添加对Log4j2的支持前,需要先把SpringBoot默认使用的Logback日志框架排除,修改pom.xml文件: <dependency> <groupId>org ...