学习笔记day6:position index结合
z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。
margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。
浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。
当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。
向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。
ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0,
Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。
负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。
学习笔记day6:position index结合的更多相关文章
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- CSS布局学习笔记之position
CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...
- html学习笔记之position
今天主要一直看试验position的各种属性,现在记录下来以此备忘. position有四种常有属性,分别是static,fixed.absolute,relative fixed就是相对于窗口的位置 ...
- Python学习笔记 - day6 - 函数
函数 函数在编程语言中就是完成特定功能的一个词句组(代码块),这组语句可以作为一个单位使用,并且给它取一个名字.可以通过函数名在程序的不同地方多次执行(这叫函数的调用).函数在编程语言中有基本分为:预 ...
- python学习笔记-Day6(3)
代码书写原则: 1)不能重复写代码 2)写的代码要经常变更 编程模式概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数 ...
- python学习笔记-Day6(2)
xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...
- python学习笔记-Day6(1)
shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 >>> s=shelve.open('test') > ...
- 学习笔记day6:CSS3动画属性
总结: 1: CSS动画:@keyframes animation:ie10+:加-webkit前缀: animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascri ...
随机推荐
- Codeforces 735D:Taxes(哥德巴赫猜想)
http://codeforces.com/problemset/problem/735/D 题意:给出一个n,这个n可以分解成 n = n1 + n2 + -- + nk,其中k可以取任意数.要使得 ...
- C#:向控件添加信息类
using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; names ...
- 【转】Program Files (x86)文件夹是干什么的
转载地址:http://leonax.net/p/2373/what-program-files-x86-folder-for/ 今天在微博上看到有人问这个问题.在装好64位的Windows之后,能在 ...
- tomcat部署到根路径
在Tomcat中部署war包很简单: 首先,直接把相应的war包放到$TOMCAT_HOME/webapps下,不用建目录: 然后,修改$TOMCAT_HOME/conf/server.xml,在Ho ...
- C#利用POST实现杭电oj的AC自动机器人,AC率高达50%~~
暑假集训虽然很快乐,偶尔也会比较枯燥,,这个时候就需要自娱自乐... 然后看hdu的排行榜发现,除了一些是虚拟测评机的账号以外,有几个都是AC自动机器人 然后发现有一位作者是用网页填表然后按钮模拟,, ...
- Capturing Audio & Video in HTML5
使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: ...
- 过滤器Filter(拦截jsp页面的跳转)案例:
创建一个 Filter , class类: 其继承于 接口 Filte(接口导包:import javax.servlet.Filter;) 在 web.xml 文件中配置并映射该 Filter. 其 ...
- CI框架 QQ接口(第三方登录接口PHP版)
本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代码就可以了.10分钟不要,接口就可完成.第一步 ...
- hdu4727 The Number Off of FFF
理解错题意,wa了几次. 我一开始的理解忽略了实际背景,认为错报是绝对的,不依赖于其左边的人. 而实际上某士兵报数的对错取决且仅取决于他所报的数与其左邻所报的数. 所以假设第一个人没有报错,则其后必有 ...
- IoC容器概述
IoC(Inverse of Control: 控制反转)是spring容器的内核, 字面意思是: 控制反转, 包含两个内容:(1) 控制, (2) 反转.那到底是什么东西的控制被反转了呢? 对于软件 ...