一、首先我们来看看定位的兼容性，当然是在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. zw-clay字王胶泥体系列

    zw-clay字王胶泥体系列 zw-clay字王胶泥体系列,2018新版,也是在2012版本的基础上升级的. 字王胶泥体系列的idea,源自黏土动画电影的制作模式.同样,字王胶泥体系列,也非常适合于动 ...

  2. 软件目录结构规范（以python为例）

    为什么要设计好目录结构   "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人 ...

  3. psql 存储过程

    --添加人员和虹膜注册信息 CREATE OR REPLACE FUNCTION AddPersonInfoAndIrisEnrollInfo(personName character, workSn ...

  4. Spring中三种编程式事务的使用

    引入事务管理器 @Autowired TransactionTemplate transactionTemplate; @Autowired PlatformTransactionManager tr ...

  5. kubernets 概念

    理解 Kubernetes 对象 各种资源对象的理解和定义 Kubernetes 中 Pod 的选举过程

  6. windows下共享文件夹在Linux下打开

    ①首先在Windows下创建一个准备用来共享用的文件夹 ②在虚拟机下选择第一步创建的文件夹为共享文件夹 ③在虚拟机shell命令框下输入 cd  /mnt/sgfs 回车进入共享文件夹. 备注:其他细 ...

  7. java中annotation

    什么是annotation(注解)? java.lang.annotation,接口Annotation.对于Annotation,是Java5的新特性,JDK5引入了Metadata(元数据)很容易 ...

  8. 让selenium中的Cromerderive不加载图片设置

    把配置参数(chrom_opt)设置好后将其添加到 browser = webdriver.Chrome(executable_path="chromedriver.exe的路径" ...

  9. POJ 2663 Tri Tiling 【状压DP】

    Description In how many ways can you tile a 3xn rectangle with 2x1 dominoes?  Here is a sample tilin ...

  10. 64位 windows2008 R2 上安装32位oracle 10g 的方法

    首先,我们要解除oracle安装的windows版本检测1.编辑安装包内文件  database\stage\prereq\db\refhost.xml 在 <OPERATING_SYSTEM& ...