1.介绍

1.1 说明

Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

1.2 主要的值

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；脱离文档流的布局，但还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。

1.3 辅助属性

position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：

①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px 。

2.详细展示

2.1 position:absolute

2.2.1 说明：

绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

2.2.2 视图：

2.2 position:relative

2.2.1 说明

相对定位；脱离文档流的布局，但还在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

2.2.2 视图

2.3 position:fixed

2.3.1 说明

固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

2.3.2 视图

2.3.3 应用场景

①登录框覆盖层：如dz论坛的登录。

②虚假QQ消息广告。

2.4 position:static

2.4.1 说明

无定位，表示此元素为默认定位方式。

2.4.2 应用场景

IE6的特殊处理。

3.总结

3.1 滚动条是否出现

当含有position属性的元素为最边缘元素时：

①absolute 和 relative ：含有此2个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。

②fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。

3.2 示例

3.2.1 视图

3.2.2 代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>position</title>
  6.     <style type="text/css">
  7.         div
  8.         {
  9.             height: 200px;
  10.             width: 300px;
  11.             border-color: Black;
  12.             border-style: solid;
  13.             border-width: 1px;
  14.          }
  15.  
  16.          #a
  17.         {
  18.             position:absolute;
  19.             left:900px;
  20.             top:150px;
  21.         }
  22.         #b
  23.         {
  24.             position:relative;
  25.             left:500px;
  26.             top:100px;
  27.         }
  28.         #c
  29.         {
  30.             position:fixed;
  31.             left:970px;
  32.             top:400px;
  33.          }
  34.          #d
  35.          {
  36.             position:static;
  37.             background-color:Window;
  38.          }
  39.  
  40.     </style>
  41. </head>
  42. <body>
  43. 　　<div id="a" >
  44. 　　　　div-a<br />
  45. 　　　　position:absolute;<br />
  46. 　　　　绝对定位；脱离文档流，遗留空间由后续元素填充。
  47. 　　</div>
  48. 　　<div id="b" >
  49. 　　　　div-b<br />
  50. 　　　　position:relative;<br />
  51. 　　　　相对定位；脱离文档流，但还在文档流里遗留空白空间。
  52. 　　</div>
  53. 　　<div id="c" >
  54. 　　　　div-c<br />
  55. 　　　　position:fixed;<br />
  56. 　　　　固定定位；固定在页面中，不随浏览器的大小改变而改变位置。
  57. 　　</div>
  58. 　　<div id="d"></div>
  59. 　　<input type="text" value="input1" />
  60. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  61.  
  62. </body>
  63. </html>

CSS Position 定位属性介绍的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  3. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  4. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  5. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  6. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  7. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  8. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  9. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

随机推荐

  1. (转)Ratchet教程：meta与link标签

    原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签           ...

  2. 黑马程序员——【Java基础】——面向对象（一）概述、类与对象、继承、抽象类、接口、多态、内部类

    ---------- android培训.java培训.期待与您交流! ---------- 一.面向对象概述 1.面向对象:是一个很抽象的概念,它相对面向过程而言,是一种程序设计的思想. 2.面向对 ...

  3. BZOJ 2241 打地鼠

    暴力. 这怎么这么快.... #include<iostream> #include<cstdio> #include<cstring> #include<a ...

  4. Ubuntu系统启用Apache Mod_rewrite模块

    在终端中执行 sudo a2enmod rewrite 指令后,即启用了 Mod_rewrite 模块. 另外,也可以通过将 /etc/apache2/mods-available/rewrite.l ...

  5. 【转】互联网全站HTTPS的时代已经到来

    原文地址:http://blog.csdn.net/luocn99/article/details/39777707 前言 我目前正在从事HTTPS方面的性能优化工作.在HTTPS项目的开展过程中明显 ...

  6. 编程之美的2.17，数组循环移位 & 字符串逆转（反转） Hello world Welcome => Welcome world Hello

    代码如下:(类似于编程之美的2.17,数组循环移位) static void Main(string[] args) { string input = "Hello World Welcom ...

  7. Flume NG 简介及配置实战

    Flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original generation),属于 clo ...

  8. Core Java Volume I — 3.8. Control Flow

    3.8. Control FlowJava, like any programming language, supports both conditional statements and loops ...

  9. IE6无法加载CSS

    问题:写了个页面,IE7和IE8下正常,但发现IE6下竟然没有加载css样式. 找原因,发现是因为CSS文件的编码不正确,页面是采用utf-8编码的,但样式表是复制过来的,编码是ANSI,这种情况下在 ...

  10. vcf_filter.py

    pyvcf 中带的一个工具 比其他工具用着好些 其他filter我很信不过~~  自己写的功能又很有限 所以转投vcf_filter.py啦 Filtering a VCF file based on ...