一、首先我们来看看定位的兼容性，当然是在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. audio google play()

    <audio id="music" src="" preload loop="loop" autostart="true&q ...

  2. ajax请求网络api

    不啰嗦,直接上代码: 1.在浏览器输入网址:http://api.asilu.com/weather/?callback=getname&city=深圳 你会看到如下结果:他返回的是json数 ...

  3. redis的 rdb 和 aof 持久化的区别

    aof,rdb是两种 redis持久化的机制.用于crash后,redis的恢复. rdb的特性如下: Code: fork一个进程,遍历hash table,利用copy on write,把整个d ...

  4. C# rtsp 转码rtmp nginx踩下的坑

    最近有一个项目, 进行步态识别的时候,同时需要显示摄像的实时画面.对于 Winform 显示画面,之前针对 rtmp 流的时候,是先写一个HTML 网页加载视频流,然后在IIS上发布,将地址直接赋值给 ...

  5. FileOutputSream文件字节输出流

    1.FileOutputSream文件字节输出流:  输入--写出--使用:  输出--写入--存储: 写出写入是对硬盘而言: 其中,OutputStream为所有类型的字节输出流的超类: FileO ...

  6. springboot集成themeleaf报Namespace 'th' is not bound

    <!DOCTYPE html><!--解决th报错 --><html lang="en" xmlns:th="http://www.w3.o ...

  7. Linux下/proc目录的作用

    文章是摘抄过来,方便自己查阅! 1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在 ...

  8. 2.1JAVA基础复习——JAVA语言的基础组成注释和常量变量

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  9. centos 增强功能安装失败

    centos 共享目录设置失败 /sbin/mount.vboxsf: mounting failed with the error: No such device 准备安装增强功能 [root@lo ...

  10. BZOJ 4195: [Noi2015]程序自动分析 并查集+离散化

    LUOGU 1955BZOJ 4195 题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量 ...