简介

position用于固定位置，是尤为重要的一个属性

其值可以为：

  • static: 默认值，忽略top, bottom, left, right 或者 z-index 声明
  • relative: 相对于该父级区域以及上一个子集区域的定位，用top, bottom, left, right来设定，可以使用Z-index
  • absobute: 相对于该父级区域的位置【左上角】的定位，用top, bottom, left, right来设定，可以使用z-index
  • fixed: 相对于浏览器的定位，忽略父级位置等的其他位置，可以使用Z-index
  • inherit: 继承父级position的属性

具体

 <style type="text/css">

 div

 {

 position:100px 100px;

 width:100px;

 height:100px;

 border:5px solid black;

 }

 div.pos_left

 {

 position:relative;

 left:-20px;

 border:5px solid green;

 }

 div.pos_right

 {

 position:relative;

 left:20px;

 border:5px solid green;

 }

 div.pos_ab

 {

 position:absolute;

 left:30px;

 top:50px;

 border:5px solid blue;

 }

 div.main

 {

 position:absolute;

 left:100px;

 top:50px;

 width:200px;

 height:300px;

 border:5px solid red;

 }

 div.pos_fix

 {

 position:fixed;

 left:10px;

 top:0px;

 clip:rect(0px 50px 200px 0px);

 }

 </style>

 </head>

 <body>

 <div class="main">

     <div>1.normal</div>

     <div class="pos_left">2.re-left:-20px</div>

     <div class="pos_right">3.re-left:20px</div>

     <div class="pos_ab">4.ab-(left:30px,top:50px)</div>

     <div class="pos_right">5.re-left:20px</div>

     <div class="pos_fix">6.fix-(left:30px,top:50px)</div>

 </div>

其中：

  • 【2】,【3】,【5】 为relative
当设定position: relative 
则参照父级中上一个子元素的内容区的左上角为原始点结合TRBL属性进行定位。无父级则以BODY的左上角为原始点
 
——必须注意的是，相对与上个子元素的左上角，并非图片上2对3显示的左上角而言，而是，若【2】为static，不进行TRBL变换位置时候的左上角。
——即，relative的元素其即使进行TRBL变换，但是占有的区间还是原本的区间，因此会对其他元素覆盖。
较明显的显示：
将图中【2】：
position:relative;
left:-20px;
top:-50px;
 
则：
 
图中包含【2】与【3】上下空白区域的一个区域为【2】真正占有的空间
 
  • 【4】为absolute

当设定position: relative

则参照父级中左上角为原始点结合TRBL属性进行定位。无父级则以浏览器的左上角为原始点

同时我们由relative属性的【5】看出 —— 【5】是相对【3】的空间而言的

—— absolute相当于直接覆盖而不占有真正的空间，即脱离文本流，由后续元素填补

  • 【4】为absolute

当设定position: relative —— 则以浏览器的左上角为原始点

此外

  • 只有当设定TRBL属性（TOP、RIGHT、BOTTOM、LEFT）时，relative，absolute，fixed才有效，不然将遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
  • 页面居中显示时一般不用absolute，因为放缩时，absolute会以浏览器的左上角为顶点，当然也可将其固定在一个父级区域中，固定宽度来解决
  • 【6】中所用到的 clip:rect(0px 50px 200px 0px); 可以对区域进行裁剪
  • z-index，可设置层数，高数值的元素总是会处于低数值元素的上面【只有position属性值为absolute、relative或fixed时才有效】
 
 
 

css-position的相关用法的更多相关文章

  1. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  2. Css相关用法个人总结

    Css相关用法个人总结

  3. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  4. css before after基本用法【转】

    <HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...

  5. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

  6. slf4j log4j logback关系详解和相关用法

    slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...

  7. css position的使用

    css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...

  8. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  9. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  10. $.ajax等相关用法

    下面是jquery一些方法的相关用法: $.ajax: $.ajax({ type: "GET", url: "url", data: {username:$( ...

随机推荐

  1. UpdatePanel 无刷新弹出窗口

    UpdatePanel下解决提示框不弹出的方法 用户体验上既想页面不刷新,也希望同时能够看到操作的效果(弹出提示框)! ①不刷新,我们可以使用UpdatePanel ②弹出消息框,这个有很多的方式:我 ...

  2. ActiveX添加测试工程， 出现的问题[非选择性参数][找不到成员]

    ActiveX 添加测试工程 1.新建工程MFC application, 2.添加完毕,在main Dialog中, 右键[Insert Activex Control],选择你的ActiveX控件 ...

  3. 【Android】Android程序保护与破解浅析

    此文源自组内成员分享的PPT,其他成员的文档由于没有得到授权,暂不公开. 本文命令如果没有特殊注明,均为windows 7环境. 本文只涉及大概的知识点,不涉及具体的细节,需要注意. 反编译 apkt ...

  4. [POJ2348]Euclid's Game

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8313   Accepted: 3374 Description Two p ...

  5. 解决SQL数据库无法脱机的问题

    数据库无法脱机:原理——有人在占用. 解决办法: select * from master.sys.sysprocesses where dbid=db_id('数据库名称') kill [id]

  6. 第4章 类型基础 -- 4.1 所有类型都从System.Object派生

    4.1 所有类型都从System.Object派生 “运行时”要求每个类型最终都从System.Object类型派生. 由于所有类型最终都从System.Object派生,所以每个类型的每个对象都保证 ...

  7. Windows Server 2008 R2 配置AD(Active Directory)域控制器 -zhai zi wangluo

    http://files.cnblogs.com/zhongweiv/Windows_Server_2008_R2_%E9%85%8D%E7%BD%AEActive_Directory%E5%9F%9 ...

  8. (太强大了) - Linux 性能监控、测试、优化工具

    转: http://www.vpsee.com/2014/09/linux-performance-tools/ Linux 平台上的性能工具有很多,眼花缭乱,长期的摸索和经验发现最好用的还是那些久经 ...

  9. hdoj 5522 Numbers

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5522 水题:暴力过 #include<stdio.h> #include<strin ...

  10. 安装、配置JDK的步骤

    1.配置环境变量,打开我的电脑--属性--高级--环境变量,新建系统变量JAVA_HOME .变量值:jdk的目录,比如d:/java.选择“系统变量”中变量名为“Path”的环境变量双击该变量,把J ...