简介

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. NOI2010航空管制

    2008: [Noi2010]航空管制 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 31  Solved: 0[Submit][Status] De ...

  2. Master Nginx(5) - Reverse Proxy Advanced Topics

    Security through separtion Encrypting traffic with SSL Authenticating clients using SSL Blocking tra ...

  3. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  4. 【转】为Xcode添加删除行、复制行快捷键

    原文网址:http://www.jianshu.com/p/cc6e13365b7e 在使用eclipse过程中,特喜欢删除一行和复制一行的的快捷键.而恰巧Xcode不支持这两个快捷键,再一次的恰巧让 ...

  5. BrnShop开源网上商城第一讲：架构设计

    首先在此感谢大家对BrnShop项目的支持和鼓励!我们在发布BrnShop以前曾推测项目会受到不少园友的支持,但没想到园友们的支持大大超过我们的预测.4天6000次浏览,140个推荐,170个评论,8 ...

  6. [codevs3295]落单的数

    题目描述 Description 有n个数(n是奇数),其中n-1个数两两成对,有1个数落单,找出这个数.要求O(n)的时间复杂度,O(1)的空间复杂度 输入描述 Input Description ...

  7. bzoj 2285 [Sdoi2011]保密（二分，spfa + 最大流）

    Description 现在,保密成为一个很重要也很困难的问题.如果没有做好,后果是严重的.比如,有个人没有自己去修电脑,又没有拆硬盘,后来的事大家都知道了. 当然,对保密最需求的当然是军方,其次才是 ...

  8. 解决 this virtual machine’s policies are too old to be run by this version of vmware workstation”

    VMWare从6.0升级到9.0,打开以前的虚拟机报错如下:“this virtual machine’s policies are too old to be run by this version ...

  9. HW4.32

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

  10. The Dangers of JavaScript’s Automatic Semicolon Insertion

    Although JavaScript is very powerful, the language’s fundamentals do not have a very steep learning ...