您的位置：首页 > 编程技术 > js  >  Position属性之relative用法

Position属性之relative用法

 更新时间：2015年12月16日 10:03  点击：1455

Relative是position的一个属性，是相对定位。

position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..

写了个例子如下：

Html代码

static: 默认值。无特殊定位，对象遵循HTML定位规则

absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义

fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置

" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>position</title> 
<style type="text/css"> 
  <!-- 
  body{ 
    font-size:12px; 
    margin:0 auto; 
  } 
  div#demo{ 
    position:relative; 
    border:1px solid #000; 
    margin:50px; 
    top:-50px; 
    line-height:18px; 
    overflow:hidden; 
    clear:both; 
    height:1%; 
  } 
  div#sub{ 
    position:absolute; 
    right:10px; 
    top:10px; 
  } 
  div.relative{ 
    position:relative; 
    left:400px; 
    top:-20px; 
  } 
  div.static,div.fixed,div.absolute,div.relative{ 
    width:300px;   
  } 
  div.static{ 
    background-color:#bbb; 
    position:static; 
  } 
  div.fixed{ 
    background-color:#ffc0cb; 
  } 
  div.absolute{ 
    background-color:#b0c4de; 
  } 
  div.relative{ 
    background-color:#ffe4e1; 
  } 
  --> 
</style> 
</head> 
<body> 
  <div id="demo"> 
    <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div> 
    <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div> 
    <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div> 
    <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div> 
  </div> 
</body> 
</html>

以上所述是小编给大家分享的position属性之relative用法的全部叙述，希望大家喜欢。

[!--infotagslink--]

相关文章

  • window.onerror()的用法与实例分析

    目前在做window.onerror时上报js错误信息的事，整理下相关资料,需要的朋友可以参考下...2016-01-29

  • CSS中position属性之fixed实现div居中

    这篇文章主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下...2015-12-16

  • Sort()函数的多种用法

    sort() 方法用于对数组的元素进行排序。接下来通过本文给大家介绍Sort()函数的多种用法，对sort函数的用法相关知识感兴趣的朋友一起学习...2016-03-22

  • Mysql inner join on的用法实例(必看)

    下面小编就为大家带来一篇Mysql inner join on的用法实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03

  • jQuery中 bind的用法简单介绍

    bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。这篇文章主要介绍了jQuery中的 bind用法,需要的朋友可以参考下...2017-02-19

  • position:relative absolute无法冲破

    前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题： <ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <l...2017-07-06

  • 老生常谈MYSQL模式匹配 REGEXP和like的用法

    下面小编就为大家带来一篇老生常谈MYSQL模式匹配 REGEXP和like的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03

  • JS中setTimeout的巧妙用法前端函数节流

    这篇文章主要介绍了JS中setTimeout的巧妙用法前端函数节流 的相关资料,需要的朋友可以参考下...2016-03-28

  • jQuery siblings()用法实例详解

    siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。接下来通过本文给大家介绍jQuery siblings()用法实例详解，需要的朋友参考下吧...2016-04-27

  • 通过设置CSS中的position属性来固定层的位置

    position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置，感兴趣的朋友一起学习吧...2015-12-16

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效，通过本文给大家介绍jQuery position() 函数详解以及jQuery中position函数的应用，感兴趣的朋友一起学习吧...2015-12-16

  • 关于Javascript回调函数的一个妙用

    相信在刚开始学习JavaScript的时候，很多人感到最困惑的就是回调函数了。本文通过一个小小的例子来分析回调函数的用法。对大家学习Javascript回调函数很有帮助，有需要的可以来参考学习。...2016-09-01

  • JS、jQuery中select的用法详解

    这篇文章主要介绍了JS、jQuery中select的用法详解的相关资料,需要的朋友可以参考下...2016-04-23

  • JSON简介以及用法汇总

    JSON（JavaScript Object Notation）即JavaScript对象表示法，是一种轻量级的数据交换格式。它非常便于编程人员对数据的处理，也便于机器对数据的解析和生成，应用非常广泛...2016-02-23

  • php header中Content-disposition用法详细

    本文章详细的介绍了关于php header中Content-disposition用法详细，有需要了解header用法的朋友可参考一下。 Content-disposition 是 MIME 协议的扩展，MIME 协议指...2016-11-25

  • position:fixed;在android下无效

    在做手机应用网站时使用到position时会发现无效了，但碰到这种问题的情况比较少，因为一般搞手机应用开发都会加上那么一句话，有了它就解决了。 解决办法。 代...2016-09-20

  • php 中的closure用法详解

    这篇文章主要介绍了php 中的closure用法详解,需要的朋友可以参考下...2017-06-20

  • JQuery datepicker 用法详解

    这篇文章主要介绍了JQuery datepicker 用法详解的相关资料,需要的朋友可以参考下...2015-12-27

  • C/C++中组合详解及其作用介绍

    这篇文章主要介绍了C/C++中组合的详解及其作用介绍，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-09-04

  • MySql数据库中Select用法小结

    在程序开发中数据库是必要知识点，今天小编给大家介绍mysql数据库中的select用法，包括条件筛选、指定筛选和分组显示查询语句的写法，非常不错，对mysql select用法相关知识感兴趣的朋友一起看看吧...2016-10-25