css中position 定位的兼容性，以及定位的使用及层级的应用
一、首先我们来看看定位的兼容性，当然是在IE6、7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧：
1、在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素
解决办法: 给父级也加相对定位
2、在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
解决办法: 父级不要设置双数。
这里就不上代码给大家解释了，如果小伙伴们想具体了解请自行用代码到IE6\7上面去测试。
二、现在定位有三种position:relative 相对定位、position:absolute绝对定位、position:fixed固定定位、position:static默认定位、position:inherit继承定位，现在具体来描述一下这五种定位的特征：
1、position:relative 相对定位 相对于自身
1）不影响元素本身特性
2）不使元素脱离文档流 （移动之后原始位置会被保留）
3）如果没有定位偏移量，对元素本身没有任何影响
4）提升层级
2、position:absolute 绝对定位 相对于父级(如果父不设置relative，那么子会向上寻找祖先元素，看是否设置relative。如果有则相对于设置的relative来进行定位，如果没有，那么就相对于body窗口来定位。)
1）使元素脱离文档流
2）使内嵌元素支持宽高
3）块属性标签内容撑开宽高
4）如果有定位父级相对于父级发生偏移，没有父级相对于document发生偏移
5）相对定位是配合绝对定位使用的
6）提升层级
3、position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
4、static(默认值) ；
5、inherit(从父元素继承定位属性的值);
以下代码比较简单给大家展示一下前三种定位效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1、position:relative 相对定位 相对于自身
1）不影响元素本身特性
2）不使元素脱离文档流 （移动之后原始位置会被保留）
3）如果没有定位偏移量，对元素本身没有任何影响
4）提升层级 2、position:absolute 绝对定位 相对于父级(如果父不设置relative，那么子会向上寻找祖先元素，看是否设置relative。如果有则相对于设置的relative来进行定位，如果没有，那么就相对于body窗口来定位。)
1）使元素脱离文档流
2）使内嵌元素支持宽高
3）块属性标签内容撑开宽高
4）如果有定位父级相对于父级发生偏移，没有父级相对于document发生偏移
5）相对定位是配合绝对定位使用的
6）提升层级 3、position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位； 4、static(默认值) | inherit(从父元素继承定位属性的值); 5、position:absolute;和position:fixed; 绝对定位元素子级的浮动可以不用写清浮动方法；
-->
<style>
*{margin: 0;padding: 0;}
#relative,#abselute{
position: relative;
width: 500px;
border: 1px solid #000000;
text-align: center; }
#relative{
left: 500px;
top:20px;
height: 20px;
color: red;}
#abselute{
left: 500px;
top:100px;
height: 300px; } #abselute div{
position: absolute;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
font-size: 48px;
text-align: center;
color: #fff;
}
#fixed{
width: 50px;
height: 200px;
position: fixed;
right: 0;
bottom: 0;
background-color: red;
}
</style>
</head>
<body style="height: 2000px;">
<div id="relative">position: relative; </div>
<div id="abselute">position: abselute;
<div style="background: red;">1</div>
</div>
<div id="fixed">fixed</div>
</body>
</html>
三、层级的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
定位元素默认后者层级高于前者,建议在兄弟标签之间使用;
z-index:number; 定位层级(默认0) -->
<style>
*{margin: 0;padding: 0;}
#abselute{
position: relative;
top: 20px;
left: 100px;
width: 500px;
height: 300px;
border: 1px solid #000;
}
#abselute div{
font-size: 48px;
text-align: center;
color: #fff;
position: absolute;
}
</style>
</head>
<body>
<div id="abselute">
<div style="background: red;z-index: 1;">1</div>//这里使用了层级，我们就会优先看到红色背景的色块
<div style="background: yellow;">2</div>
<div style="background: cyan;">3</div>
</div>
</body>
</html>
如下图：
End
css中position 定位的兼容性，以及定位的使用及层级的应用的更多相关文章
- CSS中的三种基本的定位机制（普通流、定位、浮动）
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 怕忘记了CSS中position的absolute和relative用法
CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解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 ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- CSS中"position:relative"属性与文档流的关系
前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...
随机推荐
- python爬虫程序打包为exe程序并在控制台下运行
上一篇文章实现了爬取任意两个用户共同想读的图书的python程序.现在此程序打包为exe程序. 使用pyinstaller实现此功能.在pyinstaller官网下载http://www.pyinst ...
- maven 控制台 打包
maven打包方法1.打开cmd,进入到项目的根目录2.执行命令:mvn clean package等待结束.结束后到目录的target子目录中找jar文件即可
- urlconnection代码
package com.yucheng.connection; import java.io.BufferedReader; import java.io.InputStream; import ja ...
- HTTP 400错误--请求无效
在发送请求后台数据时会报出来HTTP400错误,请求无效,出现这个请求无效报错说明请求没有进入到后台服务里 原因:1.前端提交数据的字段名称或者是字段类型和后台的实体类不一致.导致无法封装 2.前端提 ...
- layui table数据表格reload where参数保留问题
layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...
- 高级shell 脚本
1.函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了(这个过程称为调用函数).本节将会介绍如何在shell脚本中创建和使用函数 创 ...
- Hadoop-Impala学习笔记之管理
配置参数管理 待补充... 资源分配管理(Admission Control) Impala有资源池的概念,允许某些查询在特定的资源池执行,不过在白天不跑批/晚上不跑adhoc的DSS系统中,该机制并 ...
- MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates)
转载于: MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates) 虽然 [Display(Name="XX ...
- 20175307《Java程序设计》第8周学习总结
教材学习内容总结 本周学习<Java程序设计>第十五章: 泛型: 泛型(Generics)的主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构. 泛型类声明:class ...
- Bigger-Mai 养成计划，Python基础巩固四
一.装饰器:定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能.原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰函数的调用方式实现装饰器的知识储备:1.函数即‘变量’2.高阶函数 ...