原则1： fixed > absolute > relative
原则2： zIndex 越高越牛逼，不管你是谁无视身份。
原则3： 青出于蓝而胜于蓝，儿子永远比父亲强
原则4： 平台很重要。 就算你是权限最高的fixed或者你的阶段非常高，但如果你依附在relative的怀抱里，你也不能比position盖掉。因为你的平台已经输给了position了。但如果relative的zindex比position高。根据原则3，你就会成为最强王者。

css 定位（fixed > absolute > relative）与层级zIndex 的权限认知的更多相关文章

  1. CSS 定位元素之 relative

    1. relative 和 absolute relative 会限制 absolute. absolute 会根据 父级的的定位元素来定位. 2. overflow 和 absolue 当overf ...

  2. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  3. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  4. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  5. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  6. 2016/2/19 position： fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  7. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  8. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  9. css定位之绝对定位

    绝对定位可以做很多事情,如广告位,弹出框,遮罩层等一些功能 css的定位方式:1.静态定位, 2.绝对定位(固定定位和绝对定位) ,3.相对定位 绝对定位会受到影响的因素有 1.属性的取值. 2.元素 ...

随机推荐

  1. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  2. iOS12系统应用发送普通邮件构建邮件

    iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...

  3. Xamarin SQLite教程Xamarin.iOS项目添加引用

    Xamarin SQLite教程Xamarin.iOS项目添加引用 使用直接方式访问SQLite数据库,需要将System.Data和Mono.Data.SQlite库导入到创建的项目中.下面将分别讲 ...

  4. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  5. Shell脚本笔记（八）循环

    循环 一.whlie和until循环 while循环基本语法: while <条件表达式> do 指令 done #注意代码缩进 util循环基本语法: until <表达式> ...

  6. php 生成xml文件

    <?php class Xml{        /*      *  $aData     要格式化的数组      *  $path      xml信息要写入的文件路径     *  $ve ...

  7. php error_log() 范例

    <?php// 如果无法连接到数据库,发送通知到服务器日志if (!Ora_Logon($username, $password)) {    error_log("Oracle da ...

  8. 小型资源管理器之动态添加TreeView节点

    FrmMain主界面 using System; using System.Collections.Generic; using System.ComponentModel; using System ...

  9. shell脚本使用技巧3--函数调用

    定义函数 function fname() { statements; } 或者 fname() { statements; } 传递参数给函数: fname arg1 arg2; ex: 函数参数定 ...

  10. eclipse编辑环境下导入springmvc的源码

    如果想要查看@ModelAttribute的源码,只需要,点击ctrl+鼠标左键,就会出现attach--,点击attach--,external,选择类似springframe-web-source ...