简介

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. cgi ISAP sapi等

    1.CGI和FastCGI是apache处理php脚本的其中两种工作模式,还有ISAPI,SAPI等 2.而php-fpm并不是一种工作模式,而是一个PHP在FastCGI模式运行下的进程管理器,全称 ...

  2. 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物

    探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...

  3. HDU 5667 Sequence 矩阵快速幂

    官方题解: 观察递推式我们可以发现,所有的fi​​都是a的幂次,所以我们可以对f​i​​取一个以a为底的log,g​i​​=log​a​​ f​i​​ 那么递推式变g​i​​=b+c∗g​i−1​​+ ...

  4. 超大型 LED 显示屏

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11574&courseid=0 题目 E. 超大型 L ...

  5. nodejs调试工具node-inspector入门随笔

    最近打算玩玩node. 众所周知,在前端,调试代码有一众天然好工具——浏览器!特别是 chrome,使得 jser 们如鱼得水,玩得风生水起.但是到了node,情况就不一样了,js 代码不再运行在单纯 ...

  6. VMWare虚拟机USB连接问题

    错误31:连接到系统上的设备没有发挥作用 原文链接 描述 常用 VMware 虚拟机的有事应该遇到这种情况,就是装完 VMware ,启动时 VMware 下面会有个黄框中有" USB di ...

  7. java 小结3 hashcode和equals I/o问题

    我需要把星期天看的一些东西记录下来,要不然会忘记. hashCode.equals: 1)每个java对象都有hashCode和equals方法. java的终极类是object类,那么object类 ...

  8. 创建二叉树，C语言实现

    一.前序遍历创建二叉树,使用递归,头文件 BiTree.h /*槽点一:创建树时用scanf输入不成功*/ #ifndef BITREE_H #define BITREE_H #include< ...

  9. Shell的那些事儿

    日常工作中,哪种语言对你的帮助最大?我觉得非Shell莫属.最早接触Shell应该是在大学的时候,如做Linux文件系统裁减会用到一些命令,如find, tar, xargs, cp等等,并把它们通过 ...

  10. A Tour of Go Struct Literals

    A struct literal denotes a newly allocated struct value by listing the values of its fields. You can ...