其实话说一直以来也没真正去理解好position:relative的用法的真实意义。

　　我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的。

　　position属性是用四种定位。默认的是static。

　　position:absolute（绝对定位） ——是脱离文档流，相对于父级元素（包含这个position:relative）定位，当然如果没有，那就是相对于body定位的。

　　position:relative（相对定位） ——单独使用，我不知道很多人是不是也跟我一样忽略过它，relative 也是不脱离文档流，“这个元素会偏移某个距离。但是该元素仍保持其未定位前的形状，它原本所占的空间仍保留。”，它是相对于自己来定位的，例如：#main{position:relative;top:-50px;},这时#main会在相对于它原来的位置上移50px。 

　　position:fixed（固定定位）  —— 跟绝对定位有点类似，只是它的父级元素永远都是视窗本身。

　　

<!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: auto;

    }  

    div#demo{

        position:relative;

        border:1px solid #;

        margin:50px;

        top:-50px;

        line-height:18px;

        overflow:hidden;

        clear:both;

        height:%;

    }  

    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>

　　

　　

css中position:relative的真正理解的更多相关文章

  1. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  7. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  8. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. android.os.DeadObjectException memory near r0: 异常处理 Consumer closed input channel or an error occurred. events=0x9

    原地址:http://www.cnblogs.com/wanqieddy/p/3495338.html android.os.DeadObjectException memory near r0: 异 ...

  2. change Username for SVN(Subclipse) in Eclipse

    Subclipse does not own the information about users and passwords (credentials), so there is no way f ...

  3. What is XMLHTTP? How to use security zones in Internet Explorer

    Types of Security Zones Internet Zone This zone contains Web sites that are not on your computer or ...

  4. HDU 1385 Minimum Transport Cost （最短路，并输出路径）

    题意:给你n个城市,一些城市之间会有一些道路,有边权.并且每个城市都会有一些费用. 然后你一些起点和终点,问你从起点到终点最少需要多少路途. 除了起点和终点,最短路的图中的每个城市的费用都要加上. 思 ...

  5. hdu 3123 GCC

    这题分2种情况: 1) n>=m时,k!%m=0(k>=m),所以只需令n=m-1即可: 2) n<m时,正常情况处理即可. ;}

  6. Android 手机震动 设置震动时间

    开启震动,单次,5秒: Vibrator vibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE); //震动5秒 vibrator.vibra ...

  7. Thread的第二天学习

    1.Timer 2.TimerTask 3.new Timer().schedule(new TimerTask(    public void run(){...}    ),long/date [ ...

  8. SRAM与SDRAM的区别

    http://www.cnblogs.com/spartan/archive/2011/05/06/2038747.html SDRAM SDRAM(Synchronous Dynamic Rando ...

  9. PCL—低层次视觉—点云分割（基于凹凸性）

    1.图像分割的两条思路 场景分割时机器视觉中的重要任务,尤其对家庭机器人而言,优秀的场景分割算法是实现复杂功能的基础.但是大家搞了几十年也还没搞定——不是我说的,是接下来要介绍的这篇论文说的.图像分割 ...

  10. Maven基本操作命令

    1.mvn package 此命令包含一系列过程:validate-->compile-->test-->package Maven根据pom文件里packaging的配置,决定是生 ...