在CSS中关于定位的内容是:position:relative | absolute | static | fixed

   ● static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

   ● relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

   ● absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

   ● fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

  CSS中定位的层叠分级:z-index: auto | namber;

   ● auto 遵从其父对象的定位

   ● namber 无单位的整数值。可为负数

什么是文档流

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。

文档流是相对于盒子模型
文本流是相对于文子段落
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来,类似于一个图层的概念

下面为表格说明:

  父级标签无position限定 父级标签用static限定 父级标签用fixed限定 父级标签用absolute限定 父级标签用relative限定
fixed 相对可视窗口 相对可视窗口 相对可视窗口 相对可视窗口 相对可视窗口
absolute 相对body 相对body 相对body 相对父级 相对父级
relative 相对文本流定位(与父级有间接关系)
static

相对父级定位

top等限定无效

相对父级定位

top等限定有效

相对父级定位

top等限定有效

相对父级定位

top等限定有效

相对父级定位

top等限定有效

  

z-index计算规则

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

层级关系的比较

1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。

2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。

3. IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。

4. z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。

css定位的理解的更多相关文章

  1. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  2. CSS定位 深入理解定位(position)的偏移

    前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到 ...

  3. css定位 与position

    本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...

  4. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  5. CSS自学笔记(7):CSS定位

    很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允 ...

  6. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  7. 【CSS】 CSS 定位

    css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...

  8. selenium之css定位小结

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  9. Selenium CSS定位语法

    大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位 ...

随机推荐

  1. python 的按位与、或、异或 运算

    符号 描述 运算规则                        by MoreWindows & 与 两个位都为1时,结果才为1     (统计奇数) | 或 两个位都为0时,结果才为0  ...

  2. Hadoop 权限管理(转)

    如下图,hadoop访问控制分为两级,其中ServiceLevel Authorization为系统级,用于控制是否可以访问指定的服务,例如用户/组是否可以向集群提交Job,它是最基础的访问控制,优先 ...

  3. IOS 随笔记录

    一.IOS 关闭键盘: 1.让所有控件的键盘隐藏 // 这个方法可以让整个view取消第一响应者,从而让所有控件的键盘隐藏 [self.view endEditing:YES]; 2.让某个textF ...

  4. os模块方法

    OS 对象方法: 提供了处理文件及目录的一系列方法 os.rename(current_file_name, new_file_name) 重命名 os.remove(file_name) 删除文件 ...

  5. Centos7防火墙使用

    修改时区 Centos7 #修改时区 timedatectl set-timezone Asia/Shanghai 开启防火墙 #添加一条规则 firewall-cmd --zone=public - ...

  6. MQ入门介绍

    MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传递指的是程序 ...

  7. Groovy学习:第三章 Groovy开发环境

    本章将继续深入Groovy语言,首先学习Groovy脚本,包括从命令行编译和运行Groovy脚本,Groovy Shell,和Groovy Console.你将学会使用Groovy语言来建立域对象.控 ...

  8. JS点击

    本来是想做一个鼠标点击事件:A,B两个东西,B先隐藏,点击A,B出现,再点一次A,B消失,然后发现在判断不同的情况下,出现了一点小问题 暂时没有问题的写法: <!DOCTYPE html> ...

  9. Android开发 Butterknife使用方法总结

    前言: ButterKnife是一个专注于Android系统的View注入框架,以前总是要写很多findViewById来找到View对象,有了ButterKnife可以很轻松的省去这些步骤.是大神J ...

  10. 2018-2-13-安装-aria2

    title author date CreateTime categories 安装 aria2 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 + ...