一、首先我们来看看定位的兼容性，当然是在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. python精进之路 -- open函数

    下面是python中builtins文件里对open函数的定义,我将英文按照我的理解翻译成中文,方便以后查看. def open(file, mode='r', buffering=None, enc ...

  2. centos7 安装php7,报错cannot get uid for user nginx

     

  3. [游戏开发日志]Windows下Cocos2d-x 3.14环境搭建

    总介绍 我们小组使用的是cocos2d-x的游戏开发引擎,因此在所有开发工作之前,我们需要对这个引擎进行环境的搭建. 搭建过程 VS2013的下载和安装 VS只是作为一个开发环境而已,简单来说就是敲代 ...

  4. JDK8到JDK12各个版本的重要特性整理

    JDK8新特性 1.Lambda表达式 2.函数式编程 3.接口可以添加默认方法和静态方法,也就是定义不需要实现类实现的方法 4.方法引用 5.重复注解,同一个注解可以使用多次 6.引入Optiona ...

  5. Tensorflow object detection API 搭建属于自己的物体识别模型

    一.下载Tensorflow object detection API工程源码 网址:https://github.com/tensorflow/models,可通过Git下载,打开Git Bash, ...

  6. HashMap 和 Hashtable 的 6 个区别，一般人不知道最后一条

    1.线程安全 Hashtable 是线程安全的,HashMap 不是线程安全的. 为什么说 HashTable 是线程安全的? 来看下 Hashtable 的源码,Hashtable 所有的元素操作都 ...

  7. 在windows+eclipse+git遇到的未修改文件被标记为已修改的问题

    最近遇到2个具体的问题: 1.我们有个工程里面有几个外部jar包,这几个jar包经常会更新,更新的时候如果是在eclipse中执行的,由于windows文件机制,所以会报错无法覆盖这几个jar包.虽然 ...

  8. Unicode,GBK和UTF8

    字符集 在介绍他们之间的区别时, 我们先讲下什么是Unicode. 简单来说,Unicode是一个字符集(character set), 和ASCII一样, 其作用是用一系列数字来表示字符(chara ...

  9. Node.js基础学习二之POST请求

    本篇介绍下 Node.js post 请求 需求: 用户登录,前端界面输入用户名和密码,点击登录请求后台验证,根据后台反馈的信息做出响应 前端: (1)使用form表单 (2)使用ajax异步请求 服 ...

  10. MyRedis

    目录 其他 其他 Redis面试题集