css中position与z-index
position属性
在css中,position属性用来控制元素的位置信息,其取值共有4种,即static、relative、absolute、fixed。
静态定位(static)
若没有指定position属性,则默认的position属性值为static,则所有poition属性值为static的对象将按照你所编写html标签的顺序依次呈现。
相对定位(relative)
该属性值仍然保持对象所在文档流的位置,即它与static所呈现的次序相同,与static属性不同的是,它可以通过top,left,right,bottom属性设定自己的新显示位置,这四个属性值是相对于该对象原来所在的位置。
绝对定位(absolute)
与relative定位不同的是,该属性值会将当前对象脱出文档流,后面的对象占有该对象原来所在的位置;与relative定位相似的是,他可以通过top,left,right,bottom属性重新设定自己的新位置,但该属性的取值不是相对于其最近的一个position值不为static的祖先元素的位置。
固定定位(fixed)
固定定位与绝对定位很相似,它同样会使得当前对象脱出文档流,也可以通过top,left,right,bottom属性重设自己的新位置,但是该属性的取值是相对于浏览器窗口,就如"fixed"的含义一样,是钉在窗口中的某一处,其位置固定,不会随着滚动条的拖动而发生改变。
z-index属性
如果说一个平面是由x轴和y轴所构成的一个平面,那么一个html页面就可以看成是一个由x轴、y轴和z轴所组成的一个页面,如图所示:
其中z-index所表示的就是该页面中元素在z轴上的高度,如图A元素的z-index值就比B元素的z-index值要大。但如果要体现z-index的效果也是有条件的,就是该元素的position值不为static(即为absolute、relative或fixed)。
http://www.cnblogs.com/roucheng/
css中position与z-index的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- CSS中"position:relative"属性与文档流的关系
前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- CSS中position的4种定位详解
大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
随机推荐
- 第一部分:IBM量子体验
(一)量子世界 今天的计算机使用标准的(或用物理学家的话来说,“经典的”)计算模型来执行计算与处理信息,此计算模型要追溯到图灵(Turing)和冯・诺伊曼(Von Neumann)时期.在此模型 ...
- WPF 获取程序路径的一些方法,根据程序路径获取程序集信息
一.WPF 获取程序路径的一些方法方式一 应用程序域 //获取基目录即当前工作目录 string str_1 = System.AppDomain.CurrentDomain.BaseDirector ...
- How to set colors of HTML tables
There is a simple way to set the color of tables: use the bgcolor attribute of tag <table>. ...
- HPUX 大文件系统扩容
1.比对出新增加的磁盘 ioscan -fnuC disk ioscan -m dsf ioscan -fnC disk ioscan -m dsf 2.创建物理卷 pvcrea ...
- ORACLE查看并修改最大连接数
http://blog.sina.com.cn/s/blog_4df2251d0100hkzv.html 第一步,在cmd命令行,输入sqlplus 第二步,根据提示输入用户名与密码 1. 查看p ...
- Android之 -WebView实现离线缓存阅读
前言 本篇博客要实现的是一个离线下载和离线阅读的功能,这是很多阅读类app都常见的一个功能,典型的应用就是网易新闻.什么是离线下载?其实这个概念是比较模糊,是离线之后下载呢,还是下载之后离线,但稍微有 ...
- A little problem for pt-pmp
https://bugs.launchpad.net/percona-toolkit/+bug/1320168 We use the pt-pmp (a variety for pmp !http:/ ...
- Oracle 行转列总结 Case When,Decode,PIVOT 三种方式 - 转
最近又碰到行专列问题了,当时不假思索用的是子查询,做完后我询问面试管行专列标正的写法应该如何写,他告诉我说应该用"Decode",索性我就总结一下,一共三种方式 --======= ...
- QTP对象管理
QTP对象库管理 - 动态绑定对象库文件:http://blog.csdn.net/testing_is_ ... le/details/20569843 用ObjectRepositoryUtil动 ...
- ux.form.field.KindEditor 所见所得编辑器
注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...