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

CSS2.0中position主要用于HTML元素的定位，在实际设计中还是非常有用的。但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用，非常打脑壳

不管再咋个打脑壳，大家首要的还是记住position的几个属性值

  • static: HTML元素的默认定位方式
  • absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
  • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

因为static和fixed比较简单，所以下面的案例我们来介绍一个relative和absolute这个两个属性。先看一个案例截图

上面截图由3个div组成，外层div名称为scroll，第2个div的名称为sub，第3个div的名称为ssub。现在我就来告诉大家如何使用position中absolute和relative

记住如下的口诀

  • 绝对定位（absolute）位置是相对最近已经定位的父元素，如果父元素本身没有使用position定位，则相对于文档（html）定位
  • 绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位

案例代码

<!DOCTYPE html>

<html>

<head>

<style>

div.scroll /*父级元素,注意使用了relative*/

{

background-color:#00FFFF;

width:350px;

height:350px;

position: relative;

}

div.sub { /*第2个子级元素*/

width:200px;

height: 200px;

border: 1px solid red;

position: absolute;

left: 10px;

top: 10px;

}

div.ssub{ /*最里层的元素*/

width:100px;

height: 100px;

border: 1px solid red;

position: absolute;

left: 10px;

top: 10px;

}

</style>

</head>

<body>

<div class="scroll">

  <div class="sub">

    <div class="ssub"></div>

  </div>

</div>

</body>

</html>

CSS定位总结（来自divcss5官方网站的总结，本人觉得非常好，就记下来）。多谢divccs5，http://www.divcss5.com/rumen/r403.shtml

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

怕忘记了CSS中position的absolute和relative用法的更多相关文章

  1. CSS中position的absolute和relative用法

    static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

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

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

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

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

  7. CSS中Position属性

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

  8. CSS中position和header和overflow和background

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

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

随机推荐

  1. 11.SUSE Linux服务器系统网卡配置重启问题

    问题:系统更改IP地址重启服务时网卡信息不正确 linux#~ vi /etc/sysconfig/network/ifcfg-eth0 BOOTPROTO='static'BROADCAST='19 ...

  2. Java文件处理之FileReader可输出中文字符

    import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException; public ...

  3. php compact()函数 语法

    php compact()函数 语法 作用:创建包含变量名和它们的值的数组.大理石构件哪家好 语法:compact(var1,var2...) 参数: 参数 描述 var1 必需.可以是带有变量名的字 ...

  4. Python_010(迭代器)

    一.函数名的运用 1.函数名的内存地址 def func(): print("英雄联盟") print(func) #输出结果: <function func at 0x00 ...

  5. Windows环境下使用Mycat模拟分库分表-读写分离案例

    一.基本环境 W7 64位.Mycat1.6.MySQL8.0 二.Mycat核心配置文件配置 解压Mycat1.6,并对server.xml.schema.xml.rule.xml三个核心配置文件做 ...

  6. 【HDOJ6659】Acesrc and Good Numbers（dfs）

    题意:定义f(n,d)为数码d在1到n中出现的次数,其中d=0..9 如果f(d,k)=k,则称k是d好数 给定x和d,求不大于x的最大的d好数 x<=1e18 思路:考虑f的增长率主要和位数有 ...

  7. RTF筛选工具

    您可借助此项筛选程序对具备.rtf扩展名的文档进行爬行遍历,以便通过搜索结果对目标文档加以访问调用.管理员应先在相关服务器上对程序文件进行注册,方可运行此项工具. 用户下载.安装并使用相关代码的行为即 ...

  8. WIN7自带端口转发渗透小技巧

    目标是WIN7 X64,且开启了防火墙,想要用他的机器去访问别的机器,又不想登陆他的系统,常规办法一般是上传一个htran,然后进行转发,但是对方有杀软,有被杀的可能性,所以我用另外一种办法达到我的目 ...

  9. 2019ICPC上海网络赛A 边分治+线段树

    题目: 给定一棵树, 带边权. 现在有2种操作: 1.修改第i条边的权值. 2.询问u到其他一个任意点的最大距离是多少. 解法:边分治+线段树 首先我们将所有的点修改和边修改都存在对应的边里面. 然后 ...

  10. 一个关于 ie 浏览器的 bug 解决过程和思考

    首先我们测试了老师反馈的异常情况.这所中学使用的是 IE8 浏览器.IE8 浏览器提交作文评分的情况是:一直停留在“正在提交系统评分”的页面,停留了很长时间以后,页面空白. 换用火狐浏览器,可以正常评 ...