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. day01-html

    HTML概述: HTML: Hyper Text Markup Language 超文本标记语言 超文本: 比普通文本功能更加强大,可以添加各种样式 标记语言: 通过一组标签.来对内容进行描述. &l ...

  2. 一、C++类库与C#类库相互调用

    1.C++调用C#类库 1.准备C#类库(dll文件) 1.1.创建C#类库: 右击项目类库生成即可, 出现.dll(类库)与.pdb(pdb文件包含了编译后程序指向源代码的位置信息, 用于调试的时候 ...

  3. eclipse没有Web项目和Server选项

    (1)在Eclipse中菜单help选项中选择install new software选项 (2)在work with 栏中输入 http://download.eclipse.org/release ...

  4. Sass:@at-root

    @at-root 从字面上解释就是跳出根元素.当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root.来看一个简单的示例: .a { color: red; .b { color ...

  5. Vue 组件间的传值（通讯）

    组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...

  6. koa2 进阶网站

    http://www.ruanyifeng.com/blog/2017/08/koa.html  阮一峰 https://www.itying.com/koa/ koa2中文网 https://blo ...

  7. 对webpack的初步研究1

    一.概念: 1.webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器.当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多 ...

  8. 多个webView嵌套在UIScrollView里面内存优化

    之前一直纠结在使用UIWebView上,发现加载6个UIWebView占用了290M左右内存,切换时还会增加.后来看到一篇文章:http://blog.csdn.net/kongu/article/d ...

  9. App.after

    解释: App.after可以增加APP级的切面,触发的时机是在所拦截的对应生命周期方法执行之后. 方法参数:Object Object 参数说明: 参数名 类型 必填 默认值 说明 methods ...

  10. Python_004(列表和元组)

    一.列表 1. 列表: 列表的创建:li = [],列表中可以放置字符串,元组,列表,字典,列表等各种数据类型,32位的Python可以存放2^32个数据 2. 列表的索引和切片 列表的索引:格式ls ...