几种Position常见的属性就是一下几种：

1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

主要要区分就是absolute和relative

relative:他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

absolute:他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，

几种Position属性的用法的更多相关文章

  1. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  2. DIV-CSS布局中position属性详解

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  3. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  4. css中的display以及position属性

    我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...

  5. WPF MediaElement.Position属性

    Position 属性定义:获取或设置媒体播放时间的当前进度位置. // // 摘要: // 通过媒体播放时获取或设置进度的当前位置. // // 返回结果: // 媒体时自以来的.默认值为 00:0 ...

  6. 细说css中的position属性

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

  7. position属性详解

    内容: 1.position属性介绍 2.position属性分类 3.relative相对定位 4.absolute绝对定位 5.relative和absolute联合使用进行定位 6.fixed固 ...

  8. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

随机推荐

  1. Oracle 添加第二个实例 和 监听

    1.添加第二个实例 配置和移植工具 -->Database Configuration Assistant 然后一步一步创建实例(实例名为ORCL2) 创建成功后会在系统的服务里面有个服务名称为 ...

  2. SQL疑难问题

    最近,遇到并解决一个SQL上的疑难问题.考勤系统,记录着员工进出公司的刷卡记录.而员工刷卡并不规范,存在刷多次的情况.例如:出去时连续刷多次,进来时也连续刷多次.筛选有效刷卡记录数据的规则:对于出去时 ...

  3. 基于Jforum开源项目的论坛网站

    基于Jforum开源项目的论坛网站 开发原因: 刚完成了以wordpress及其插件simple-press为基础的论坛网站,因为一直从事java方面开发, 所以尝试一下使用java开源项目Jforu ...

  4. Nginx中的进程亲和性 affinity

    Nginx采用多进程Master/Worker结构,Worker进程数为CPU个数时工作效率最高,Nginx通过affinity为每个Worker进程绑定一个CPU,避免进程切换带来的消耗,同时能够保 ...

  5. OC NSString 基本操作（用到补充持续更新）

    1.将字符串拆分成数组 NSString *string = @"1,2,3,4"; NSArray *array = [string componentsSeparatedByS ...

  6. Individual Project - Word frequency program

    1.项目预计用时 -计划学习C#和百度一些用法的时间:5小时 -项目本身打算写两个类,一个是遍历搜索文件夹的,另外一个用来统计单词.计划用时:5小时 2.项目实际用时 学习C#以及正则表达式的用法:3 ...

  7. Httpclient请求数据

    package com.baidu.myutils; import java.io.IOException; import org.apache.http.HttpEntity; import org ...

  8. Socket异步存储示例

    异步客户端存储示例: using System; using System.Net; using System.Net.Sockets; using System.Threading; using S ...

  9. 2.4G/5G频段WLAN各国使用信道表

    List of WLAN channels (维基百科):https://en.wikipedia.org/wiki/List_of_WLAN_channels 2.4G 5G 另附美国5G允许使用的 ...

  10. 怎么利用javascript删除字符串中的最后一个字符呢？

    程序员就是每天在各种代码下不停的调试,世界买家网最近遇到了烦心事,是什么事情呢? 需求是一个字符串,想删除这个字符串最后一个字符,比如“1,2,3,4,5,”,删除最后一个“,”用javascript ...