今天同事发现一个有意思的问题，关于position的层级关系的，他要不说我也没注意过

测试后果然有趣，有待深入研究：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Css中Position定位属性与层级关系</title>

         <style type="text/css">

             #W{

                 position: relative;

             }

             .a{position: absolute;}

             #addTR{position: relative;width: 200px;height: 30px;background: seagreen;}

         </style>

     </head>

     <body>

         <div id="w">

             <div id="addTR">

                 <p>文字</p>

             </div>

             <div class="a">

                 <img src="img/1.jpg"/>

             </div>

             <div class="a">

                 <img src="img/2.jpg"/>

             </div>

             <p style="margin-top: 500px;">

                  层级关系

                  <br />

 首先是遵循DOM的规则，同级的后面居上。<br />

 一般有定位属性的元素会高于无定位属性的同级元素。<br />

 都有定位属性的同级元素，z-index大者居上<br />

 如果是非同级的元素， 则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上<br />

             </p>

         </div>

     </body>

 </html>

一个博主的回答：http://www.tuicool.com/articles/rmAzia

解释原文：http://www.elanblog.com/2014/03/04/postion-teach/

2017-04-18  15:13:12 end

css - Position定位属性与层级关系的更多相关文章

  1. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  2. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  3. CSS position定位属性

    css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...

  4. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  5. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  6. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  8. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  9. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

随机推荐

  1. Linux 网络子系统之网络协议接口层（一）

    Linux 网络设备驱动之网络协议接口层介绍. 网络协议接口层最主要的功能是给上层协议提供透明的数据包发送和接收接口. 当上层ARP或IP需要发送数据包时,它将调用网络协议接口层的dev_queue_ ...

  2. FusionCharts JavaScript API - Events 全局事件处理

    FusionCharts JavaScript API - Events 全局事件处理 Home > FusionCharts XT and JavaScript > API Refere ...

  3. 如何去掉drwxr-xr-x@中的@符号Linux文件扩展信息

    如何去掉drwxr-xr-x@中的@符号Linux文件扩展信息ls -lart drwxrwxrwx@ 10 rlanffy staff 340B 3 6 2015 files-rwxrwxrwx@ ...

  4. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  5. 【转】浅谈.net remoting 与webservice

    1. .NET Remoting .NET Remoting是微软随.NET推出的一种分布式应用解决方案,被誉为管理应用程序域之间的 RPC 的首选技,它允许不同应用程序域之间进行通信(这里的通信可以 ...

  6. 【Java面试题】16 静态代码块，main方法，构造代码块，构造方法

    public class HelloB extends HelloA{ public HelloB() { System.out.println("HelloB"); } { Sy ...

  7. Linux(Ubuntu)下搭建ASP.NET Core环境

    今天来学习一下ASP.NET Core 运行在Ubuntu中.无需安装mono . 环境 Ubuntu 14.04.4 LTS 服务器版 全新安装系统. 下载地址:http://mirrors.neu ...

  8. haproxy+tomcat实现负载均衡以及session共享(linux centos7环境)

    一.安装HAProxy 1.进入home目录,下载最新haproxy安装包. cd /home wget http://haproxy.1wt.eu/download/1.4/src/haproxy- ...

  9. easyUI实现(alert)提示框自动关闭的实例代码

    function alert_autoClose(title,msg,icon){  var interval;  var time=1000;  var x=2;  //设置时间2s $.messa ...

  10. 如何使用ChemDraw绘制自由基符号

    ChemDraw软件是一款全球领先的化学绘图工具,能够绘制各种复杂的化学符号和化学结构图形.ChemDraw汉化版结合了中国用户的使用习惯,可以帮助国内化学行业工作者更加轻松快捷地绘制化学图形.本教程 ...