专栏首页前端说吧Css中Position定位属性与层级关系

Css中Position定位属性与层级关系

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

测试后果然有趣,有待深入研究:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Css中Position定位属性与层级关系</title>
 6         <style type="text/css">
 7             #W{
 8                 position: relative;
 9             }
10             .a{position: absolute;}
11             #addTR{position: relative;width: 200px;height: 30px;background: seagreen;}
12         </style>
13     </head>
14     <body>
15         <div id="w">
16             <div id="addTR">
17                 <p>文字</p>
18             </div>
19             <div class="a">
20                 <img src="img/1.jpg"/>
21             </div>
22             <div class="a">
23                 <img src="img/2.jpg"/>
24             </div>
25             <p style="margin-top: 500px;">
26                  层级关系
27                  <br />
28 
29 首先是遵循DOM的规则,同级的后面居上。<br />
30 
31 一般有定位属性的元素会高于无定位属性的同级元素。<br />
32 
33 都有定位属性的同级元素,z-index大者居上<br />
34 
35 如果是非同级的元素, 则会忽略元素本身z-index,取与对比元素同级的祖先元素的z-index属性,大者居上<br /> 
36             </p>
37         </div>
38     </body>
39 </html>

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • css布局 - 工作中常见的两栏布局案例及分析

      突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。(以后看到其他类型的我再补充)

    xing.org1^
  • JS-匀速运动-运动停止

    xing.org1^
  • 【React总结(一)】浅谈 React 中 key

    上周在处理项目的时候,由于之前项目中引用的是 cdn 中的生产环境的 React 所以导致所有在开发环境中应该暴露的 warnning 都被屏蔽了,上周修改了 ...

    志航
  • 不一样的动图-APNG

    动图 说到动图,首先我们想到的 GIF 格式,GIF 在网络上流行已久,各种动态表情包都是 GIF 图做的。 但是 GIF 的缺点也很明显,透明背景的 GIF ...

    Bob.Chen
  • 盒模型使用margin相关技巧及解决margin-top塌陷问题

    1、设置元素水平居中: margin:x auto; 2、margin负值让元素位移及边框合并

    Devops海洋的渔夫
  • CSS+JS实现tab标签切换

    循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

    lzugis
  • [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

      在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中,我们经常会遇到...

    程序员宇说
  • 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular...

    Ryan-Miao
  • python中的字符数字之间的转换函数

    用户1733462

扫码关注云+社区

领取腾讯云代金券