一、首先我们来看看定位的兼容性，当然是在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 定位的兼容性，以及定位的使用及层级的应用的更多相关文章

  1. CSS中的三种基本的定位机制（普通流、定位、浮动）

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  4. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  5. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  6. 深入理解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 ...

  7. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  8. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  9. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

随机推荐

  1. UVA10723 电子人的基因 Cyborg Genes

    题意翻译 [题目描述] 输入两个A~Z组成的字符串(长度均不超过30),找一个最短的串,使得输入的两个串均是它的子序列(不一定连续出现).你的程序还应统计长度最短的串的个数. e.g.:ABAAXGF ...

  2. Linux 故障问题处理

    一.   Debian   网卡问题 原因: 网卡提示 Device Not Managed 处理方法: . 编辑/etc/NetworkManager/NetworkManager.conf: 将其 ...

  3. linux系统安装MongoDB

    1.在官网https://www.mongodb.org/dl/linux/x86_64下载对应的安装压缩包,我用的是3.2.5,建议使用此版本,版本越高,可能会出现其它未知问题,比如需要glibc高 ...

  4. 2017.11.27 变量进阶与LED矩阵

    局部变量:函数内部声明的变量,只在函数内部有效. 全部变量:在函数外部声明的变量,全局都有效,直到程序执行完毕. 全局变量负作用: 1.降低函数的独立性 2.降低函数的通用性,不利于函数的重复调用. ...

  5. AbstractMethodError:

    AbstractMethodError: This java.lang.AbstractMethodError is usually thrown when we try to invoke the ...

  6. 关于linux系统CPU篇--->上下文切换

    1.什么是CPU上下文切换? linux是一个多任务操作系统,它支持远大于CPU数量的任务同时运行,当然这些任务实际上并不是真的同时在运行,而是因为系统在很短的时间内,将CPU轮流分配给它们,造成多任 ...

  7. 安卓GridView奇偶行不同颜色

    背景:安卓制作表格,两列多行,奇数行和偶数行背景色不同 分析:GridView是经常用来制作表格的,但是和ListView不同,不能简单的用position % 2 == 0/1 来判断奇偶行,下面提 ...

  8. linux随

    Linux 1991芬兰大学生linus 安全 开源 免费 可靠 (堡垒机)(跳转机) 多用户 多任务 处理并发及速度比windows好很多 命令:ifconfig pwd ls -a -l -t(时 ...

  9. 【题解】Luogu P2347 砝码称重

    正经·DP题解 一道非常好的背包练手题( sto(注:原思路来源 SLYZ_0120 的题解)orz 开始这道题 1.输入六个数,存进数组中 2.初始化 f 数组为0. f [ i ] 表示重量为 i ...

  10. Hadoop2-HDFS学习笔记之入门（不含YARN及MR的调度功能）

    架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...