css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于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定位属性与层级关系的更多相关文章
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS position定位属性
css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- Css Position定位(简易版本)
准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
随机推荐
- openwrt内核配置选项添加
摘自:http://blog.csdn.net/weiniliuchao/article/details/50295527 增加内核配置选项 openwrt的.config文件中,关于内核的选项都是形 ...
- JVM中的垃圾回收
GC 垃圾回收回收什么 Java的内存分配原理与C/C++不同.C/C++每次申请内存时都要malloc进行系统调用.而系统调用发生在内核空间,每次都要中断进行切换,这须要一定的开销. 而Java虚拟 ...
- 使用html2canvas实现超出浏览器部分截图
之前写过一篇关于 html2canvas如何在元素隐藏的情况下生成截图 的文章,后面发现还有个坑在等着我,就是如果合成图片太大,超出了浏览器的可视区域,那么超出部分是无法截图的.在网上找到了以下方法, ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
- C++ Primer学习笔记(三) C++中函数是一种类型!!!
C++中函数是一种类型!C++中函数是一种类型!C++中函数是一种类型! 函数名就是变量!函数名就是变量!函数名就是变量! (---20160618最新消息,函数名不是变量名...囧) (---201 ...
- e685. 显示页面格式窗口
The page format dialog allows the user to change the default page format values such as the orientat ...
- ffmpeg笔记——UDP组播接收总结
ffmpeg在avformat_open_input里面已经实现了UDP的协议,所以只需要设置好参数,将url传递进去就可以了. 和打开文件的方式基本一样: 01 AVCodecContext *pV ...
- 转载:【原译】Erlang列表处理(Efficiency Guide)
转自:http://www.cnblogs.com/futuredo/archive/2012/10/22/2734186.html List handling 1 Creating a list ...
- mysql 异常 Lock wait timeout exceeded; try restarting transaction;expc=java.sql.SQLExcept
这种一般是等锁超时了,可以设置延长等锁时间. mysql> set innodb_lock_wait_timeout=100 Query OK, 0 rows affected (0.02 se ...
- Buff系统框架设计
Buff的配置文件 BufType: 1: 精神类Buf 2: 物理类Buf 3.元素类Buf 4.其他类Buf 5.被动类BufBufSubType: 1000-1999 精神子类 2000-299 ...