简介

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. 深入理解c语言_从编译器的角度考虑问题_纪念Dennis Ritchie先生

    开源中国: Dennis Ritchie教授过世了,他发明了C语言,一个影响深远并彻底改变世界的计算机语言.一门经历40多年的到今天还长盛不训的语言,今天很多语言都受到C的影 响,C++,Java,C ...

  2. 【转】JNI学习积累之一 ---- 常用函数大全

    原文网址:http://blog.csdn.net/qinjuning/article/details/7595104 本文原创,转载请注明出处:http://blog.csdn.net/qinjun ...

  3. 微信公共服务平台开发（.Net 的实现）2-------获得ACCESSTOKEN

    成为了开发者之后微信平台会给您appid和secret,在订阅号中是没有的,所以因该申请一下服务号 有了ACCESSTOKEN才能做添加菜单,上传/下载图片等功能 private string Get ...

  4. Ubuntu 安装Chrome步骤

    一.添加PPA 从Google Linux Repository(http://www.google.com/linuxrepositories/)下载安装Key,或把下面的代码复制进终端,回车,需要 ...

  5. 【HTML】Beginner3：ParagraphsEmphasisLine breaks

    1.Paragraphs </p>     distinct blocks of the text     Think of the HTML contents as if it were ...

  6. Java 并发之线程安全

    写线程安全的代码,说白了就是管理一个类的共享的.可变的状态.只要有多于 1 个线程对类的状态进行写入,那么就必须用同步来协调这多个线程对状态的访问.对于一个没有状态的类来说(简单的理解就是只有方法没有 ...

  7. git 版本历史

    版本:git rev-parse --git-dir显示Git版本库的位置   --show-cdup显示当前工作区目录的深度  --parseopt解析命令行参数 $ git rev-parse - ...

  8. HW4.32

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  9. HDOJ-ACM1425 sort 简单hash应用

    其实快排也可以通过这个问题~不是考点 没想到考点是这个,简单hash应用,空间换时间 初始化一个长度为1000001的数组(由于数字的范围为[-500000,500000]) 如果存在这个数m,数组下 ...

  10. 怎么加 一个 hyperlink 到 e-mail template for CRM

    Recently I had a client inquire as to how one would insert a hyperlink into a CRM email template. Wh ...