一、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定位

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

  2. 笔记：css中的position定位

    position的值可以是:static,relative,absolute,fixed. 默认值是 static.设置 left.top值无效. relative是相对定位,可以设置left.top ...

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

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

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

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

  5. Css中的Position属性

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

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

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

  7. 理解css中的position属性

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

  8. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  9. 详解css中的position属性

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

  10. css 中的position z-index em rem zoom 的基本用法

    1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. ...

随机推荐

  1. mac下安装windows系统

    前言:我装win系统的原因很简单,就是某天突然想玩qq宠物了(不要嘲笑,自行尴尬一波)... 下面进入正题: 1.我的当前系统版本: 其实App Store 上新版本的os系统也已经出来很长一段时间了 ...

  2. ES的基本用法

    ES的基本概念 1> 集群和节点 一个es集群是由一个或多和es节点组成的集合 每一个集群都有一个名字, 如之前的wali 每个节点都有自己的名字, 如之前的master, slave1, sl ...

  3. CentOS7 安装 MySQL

    一.首先检查 MySQL 是否已安装 yum list installed | grep mysql 如果有的话 就全部卸载 yum -y remove +数据库名称 二.MySQL 依赖 libai ...

  4. Android的JDK、SDK、Eclipse的理解

    今天看了这方面的内容,感觉学到了一些东西: 首先,jdk是用来处理Java语言的, sdk是用来处理Java语言和硬件之间的关联的, eclipse是用来编写Java语言的, 通过对这方面的理解,加深 ...

  5. toFixed()一不小心踩了一个坑

    toFixed,多么简单的一个函数,昨天突发奇想做两道算法题练练手.结果,踩到了一个从未遇到的坑! \n 简单来讲是要对输入的很多组数据,自己写一个函数做个处理,把每次函数处理的结果要相加求和.最后输 ...

  6. [html]------行内元素与块级元素

    块级元素(block element)div -最常用的块级元素dl - 和dt dd搭配使用的块级元素form - 交互表单h1 - 大标题hr - 水平分隔线ol - 排序表单p - 段落ul - ...

  7. 跟我学ASP.NET MVC之一：开篇有益

    摘要: ASP.NET MVC是微软的Web开发框架,结合了模型-视图-控制器(MVC)架构的有效性和整洁性,敏捷开发最前沿的思想和技术,以及现存的ASP.NET平台最好的部分.它是传统ASP.NET ...

  8. Java单元测试初体验(JUnit4)

    什么是单元测试 我们在编写大型程序的时候,需要写成千上万个方法或函数,这些函数的功能可能很强大,但我们在程序中只用到该函数的一小部分功能,并且经过调试可以确定,这一小部分功能是正确的.但是,我们同时应 ...

  9. 在C++中怎么判断一个double型数据的小数点部分是否为零

    例:double sf = 123.123: 这里我们怎么判断sf小数点部分是否为零,可以直接用原数减去将sf强制转换后的整数是否为零来判断. if((sf - (int)sf) == 0),则说明s ...

  10. BZOJ4944 泳池 解题报告

    题目描述 有一个 \(n\) 行无穷列的海域,每个格子有 \(q\) 的概率安全, \(1-q\) 的概率不安全.从中框出一个面积最大的矩形,满足以下两个条件: (1)矩形内的格子均安全: (2)矩形 ...