相对定位

使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
      使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。以下为后面实验的基准代码。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>position属性</title>

<style type="text/css">

body{

    margin:20px;

    font :Arial 12px;

}

#father{

    background-color:#a0c8ff;

    border:1px dashed #000000;

    padding:15px;

}

#block1{

    background-color:#fff0ac;

    border:1px dashed #000000;

    padding:10px;

}

</style>

</head>

<body>

    <div id="father">

        <div id="block1">Box-1</div>

    </div>

</body>

</html>

这是一个很简单的标准流方式的两层的盒子，页面的效果如下图：

实验一：一个子块的情况 

下面的CSS样式代码中的Box-1处，将position属性设置为relative，并设置偏移距离，代码如下：

#block1 {

    backgroud-color: #fff0ac;

    border: 1px dashed #000000;

    padding: 10px;

    position: relative;

    left: 30px;

    top: 30px;

}

下图可以看出Box-1和原来的位置相比，它向右和向下分别移动了30像素，也就是说，“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方，“top:30px”的作用就是使Box-1的新位置在原来位置的上边框下侧30像素的地方。

这里用到了top和left这两个CSS属性，实际上在CSS中一共有4个配合position属性使用的定位属性，除top和left之外，还有right和bottom。这4个属性只有当position属性设置为absolute、relative和fixed时才有效。而且，在position属性取值不同时，它们的含义也不同。当position设置为relative时，它们表示各个边界与原来位置的距离。
      top、right、bottom和left这4个属性除了可以设置为绝对的像素数，还可以设置为百分数。此时，可以看到子块的宽度依然是未移动前的宽度，撑满未移动前父块的内容。只是向右移动了，右边框超出了父块。因此，还可以得出另一个结论，当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。类似的，如果将偏移的数值设置为：right:30px; bottom:30px，其效果图如下：

现在我们可以得到这样的结论，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。而该相对定位的盒子则仍然位于标准流中，它对父块没有任何影响。

实验二：两个子块的情况

下面讨论的是两个子块的情况。把上面的基础代码改为如下代码，在父div中放两个子div。首先对它们都不设置任何偏移。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="zh-cn" />

<title>position属性</title>

<style type="text/css">

body{

    margin:20px;

    font-family:Arial;

    font-size:12px;

}

#father{

    background-color:#a0c8ff;

    border:1px dashed #000000;

    padding:15px;

}

#father div{

    background-color:#fff0ac;

    border:1px dashed #000000;

    padding:10px;

}

#block1{

}

#block2{

}

</style>

</head>

<body>

    <div id="father">

        <div id="block1">Box-1</div>

        <div id="block2">Box-2</div>

    </div>

</body>

</html>

效果图显示如下：

从上面的代码中可以看出，现在对两个子块的设置还都空着。下面首先将Box-1盒子的CSS设置为：

#block1 {

    position: relative;

    bottom: 30px;

    right: 30px;

}

将子块1的position属性设置成了relative，子块2还没有设置任何与定位相关的属性。此时的效果如下图，与前面的图相比可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图相比没有任何变化，就好像子块1还在原来的位置上。

这一次又验证了前面实验1中总结出的结论，并且需要进行一小点儿的改进。因为，使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。那么如果同时设置两个子块的position都设置为relative，情况又会如何呢？现在把子块2也进行相应的设置，代码如下：

上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，都会相对于原有的位置进行指定的偏移并到达新的位置，而这一偏移并不会对其后面的兄弟元素带来任何的影响。

绝对定位

在了解了相对定位之后，下面开始分析absolute定位方式，它表示绝对定位。通过上面的例子可以了解到position属性需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其它的盒子就好像这个盒子不存在一样。 以下为后面实验的基准代码。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>absolute属性</title>

<style type="text/css">

body{

    margin:20px;

    font-family:Arial;

    font-size:12px;

}

#father{

    background-color:#a0c8ff;

    border:1px dashed #000000;

    padding:15px;

}

#father div{

    background-color:#fff0ac;

    border:1px dashed #000000;

    padding:10px;

}

#block2{

}

</style>

</head>

<body>

    <div id="father">

        <div >Box-1</div>

        <div id="block2">Box-2</div>

        <div >Box-3</div>

    </div>

</body>

</html>

效果图如下。可以看到一个父div里面有3个子div，都是标准流方式排列。

实验三：使用绝对定位

下面尝试使用绝对定位，代码中找到对#block2的CSS设置位置，目前它还是空白的，下面将它改为：

#block2 {

    position: absolute;

    top: 30px;

    right: 30px;

}

这是的效果如下图，以浏览器窗口为基准，从右上角开始向下和向左各移动30像素。

是不是所有的绝对定位都以浏览器为基准来定位呢？答案是否定的，接下来对上面的代码做一处修改，为父div增加一个定位样式，代码如下：

#father {

    background-color: #a0c8ff;

    border: 1px dashed #000000;

    padding: 15px;

    position: relative;

}

如下图所示效果发生了变化，偏移的距离没有变化，但是偏移的基准不再是浏览器窗口，而是它的父div了。

对于绝对定位的描述为：使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就好像这个盒子不存在一样。
      回到之前的实验，最初的代码中，在父div没有设置position属性时，Box-2这个div的所有祖先都不符合“已经定位”的要求，因此它会以浏览器窗口为基准来定位。而当父div将position属性设置为relative后，它就符合“已经定位”的要求了，它又是所有祖先中唯一一个已经定位的，也就满足“最近”这个要求，因此就会以它为基准进行定位了。以后将绝对定位的基准称为“包含块”。

实验四：绝对定位的特殊性质

对于绝对定位，还有一个特殊性质需要介绍。见如下代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

body{

    margin:0;

}

#outerBox {

    width: 200px;

    height: 100px;

    margin: 10px auto;

    background: silver;

}

#innerBox {

    position: absolute;

    top: 70px;

    width: 100px;

    height: 50px;

    background: orange;

}

</style>

</head>

<body>

    <div id="outerBox">

        <div id="innerBox"></div>

    </div>

</body>

</html>

代码中，外面的盒子没有设置position属性，内部的盒子设置了绝对定位，但是只在垂直方向指定了偏移量，没有指定水平方向的偏移量，此时内部的盒子则因为设置了绝对定位属性，而外层div没有position属性，所以的它的定位基准是浏览器窗口。但是又由于在水平方向上没有设置偏移属性，因此在水平方向它仍然会保持原来应该在的位置，它的左侧与外层盒子的左侧对齐。因为在垂直方向上设置了“top:70px”，所以距离浏览器窗口顶部为70像素。

由此实验可知，如果设置了绝对定位，而没有设置偏移属性，那么它仍然保持原有的位置。

固定定位：

当position的属性值为fixed，即固定定位。它与绝对定位有些类似，区别主要在于定位的基准不是祖先，而是浏览器窗口或其它显示设备窗口。也就是当访问者拖动浏览器的窗口滚动条时，固定定位的元素相对于浏览器窗口的位置保持不变。

z-index空间位置： 

z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其小的上方。z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

注：该篇博客源自《CSS设计彻底研究》中的第四章，书中的例子简明扼要、通俗易懂，因此特copy下来与大家分享，同时也便于今后自己的在线查阅。

web前端学习笔记(CSS盒子的定位)的更多相关文章

  1. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  2. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  3. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  4. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  5. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  6. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  9. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

随机推荐

  1. PCFG -- 基于统计方法生成语法树

    语法树的作用 一棵语法树不仅包括了词性(part of speech), 还包括了短语(如名词短语, 动词短语)和结构化的信息(如主语, 谓语和宾语). 这些信息是进行机器翻译所必须的, 例如机器翻译 ...

  2. (转)linux服务器安全配置攻略

    引言: 最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关闭.把系统权限设置到最小话,这样才能保证服务器最大的安全.下面是CentOS服务器安全设置,供大家参考. ...

  3. 微软Connect教程系列--自动生成增删改查页面工具介绍（二）

    本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...

  4. 双击防止网页放大缩小HTML5

    幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale ...

  5. Building Apps for Windows Phone 8.1教程下载地址整理

    官方教程地址http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1http://media.ch9.ms/ch9/8db ...

  6. LIstView 滚动 异步 加载更多 mono for android ScrollStateChanged ScrollState.Idle; Fling;TouchScroll

    今天项目需要实现一下列表的分页加载 找到了Listview的ScrollStateChanged方法. 和大家分享一下 //先找到Listview ListView order = FindViewB ...

  7. asp.net linux 环境部署， jexus

    cd /tmpwget linuxdot.net/down/jexus-5.8.1-x64.tar.gztar -zxvf jexus-5.8.1-x64.tar.gzsudo mv jexus /u ...

  8. 【WPF】分享自用 白板窗口(空窗口) 控件 BlankWindow，基于WindowChrome。

    一.背景 吃产品的亏,上设计的当,最后死在变化上. 现在的产品和设计都喜欢在窗口上做一些事,比如让Title做很多事,好像跟人家用一样的窗口很Low似的,好像真的挺Low的. 所以,还不如弄一个黑板似 ...

  9. Hadoop日记Day17---计数器、map规约、分区学习

    一.Hadoop计数器 1.1 什么是Hadoop计数器 Haoop是处理大数据的,不适合处理小数据,有些大数据问题是小数据程序是处理不了的,他是一个高延迟的任务,有时处理一个大数据需要花费好几个小时 ...

  10. Android多线程分析之二：Thread的实现

    Android多线程分析之二:Thread的实现 罗朝辉 (http://www.cnblogs.com/kesalin/) CC 许可,转载请注明出处   在前文<Android多线程分析之一 ...