一、首先我们来看看定位的兼容性，当然是在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. visualization of filters keras 基于Keras的卷积神经网络（CNN）可视化

    https://adeshpande3.github.io/adeshpande3.github.io/ https://blog.csdn.net/weiwei9363/article/detail ...

  2. var,dynamic的用法

    private void Form1_Load(object sender, EventArgs e) { var dt = Getuser() as IEnumerable<dynamic&g ...

  3. CentOS7 安装 MySQL8.0

    [1]安装步骤过程 (1)yum仓库下载MySQL 命令:yum localinstall https://repo.mysql.com//mysql80-community-release-el7- ...

  4. 微信小程序数组对象

    xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...

  5. APP压力测试 monkey（新猿旺学习总结）

    安卓APP做压力测试 需要配置JDK(Java)和 配置SDK 遮掩才能使用adb命令连接手机进行模拟动作事件进行压力测试 配置 K JDK 与 K SDK 环境 a java 与 与 sdk 用于 ...

  6. 其他shell

    dash shell Debian的dash shell的历史很有趣.它是ash shell的直系后代,而ash shell则是Unix系统上原来 的Bourne shell的简化版本(参见第1章). ...

  7. 【MySQL】InnoDB 内存管理机制 --- Buffer Pool

    InnoDB Buffer Pool 是一块连续的内存,用来存储访问过的数据页面 innodb_buffer_pool_size 参数用来定义 innodb 的 buffer pool 的大小 是 M ...

  8. 复旦高等代数II（18级）每周一题

    本学期将继续进行高等代数每周一题的活动.计划从第一教学周开始,到第十五教学周结束,每周的周末公布一道思考题(预计15道),供大家思考和解答.每周一题将通过“高等代数官方博客”(以博文的形式)和“高等代 ...

  9. day17

    包什么是包 包的本质是文件夹为什么使用包 函数可以使得同一个文件中代码结构更清晰 木块(py文件)是以文件形式来组织代码结构 如果文件越来越多管理起来也不方便,所以需要使用文件夹来管理.从文件夹级别来 ...

  10. MySql 8.0 C#连接报错 MySql.Data.MySqlClient.MySqlException (0x80004005): Authentication to host '12.118.224.181' for user 'root' using method 'caching_sha2_password' failed with message: Reading from t

    解决方法 在连接字符串后面加上   SslMode=None