一、position语法与结构

position语法： position : static absolute relative

position参数：
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

二、绝对定位使用条件

position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

三、css绝对定位总结

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。

css中的position的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  3. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  5. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  6. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  7. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  8. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  9. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  10. css中的position 的absolute和relative的区别（转）

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

随机推荐

  1. [HNOI2014]米特运输

    显然知道一个节点就可以推出整棵树 然而直接乘会爆longlong 所以考虑取log 最后排序算众数即可 # include <stdio.h> # include <stdlib.h ...

  2. 对网易云音乐参数（params，encSecKey）的分析

    我们如果对网易云音乐进行爬虫的话,我们会发现,提交的参数是(params,encSecKey),然而这两个参数是一串很长的东西 我们要对网易云进行爬虫,那么就一定要将这两个参数弄明白,然后才可以进行爬 ...

  3. 如何将生产环境的字段类型从INT修改为BIGINT

    介绍 改变数据类型是一个看起来很简单的事情,但是如果表非常大或者有最小停机时间的要求,又该如何处理那?这里我提供一个思路来解决这个问题. 背景 在一个常规SQL Server heath检查中,使用s ...

  4. VM快照-克隆重要应用讲解及克隆后网卡问题解决

    快照:snapshot 1---2---3---5 用于以后 rollback 1 2 3 5 克隆前关机:halt 克隆之后连不上网 解决办法: 1.编辑eth0的配置文 vi/etc/syscon ...

  5. c# ffmpeg视频转换【转载】

    c#  ffmpeg视频转换 什么是ffmpeg,它有什么作用呢,怎么可以使用它呢,带着问题去找答案吧!先参考百度百科把,我觉得它很强大无奇不有,为了方便大家我就把链接提供了! http://baik ...

  6. python感悟

    嗯,对于python我其实也是一知半解,比较擅长java,我就拿java和python进行比较一下吧 1,首先先说简单的程序运行时间问题,对于同等时间复杂度的测试程序,python虽然运行速度没有c快 ...

  7. shell常用脚本

    shell常用脚本 author:headsen chen  2017-10-17 15:36:17 个人原创,转载请注明,否则依法追究法律责任 1,vim  name.grep.sh 2,cat   ...

  8. 走近webpack（4）--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

  9. MyBatis报错：Caused by: java.lang.NumberFormatException: For input string: "XX"

    <select id="sltTreatment" resultType="com.vitaminmd.sunny.core.bo.Treatment"& ...

  10. execCommand的复制

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...