position: relative | absolute | static | fixed

参考网站：http://blog.csdn.net/dyllove98/article/details/8967114

http://www.jb51.net/css/22213.html

http://blog.jobbole.com/49320/

实践网站：http://www.w3school.com.cn/cssref/pr_class_position.asp

static : 无特殊定位，对象遵循HTML定位默认规则 
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。

fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变

1.通过绝对定位，元素可以放置到页面上的任何位置，如果那个位置上有元素则覆盖了它。下面的标题距离页面左侧 100px，距离页面顶部 150px。

h2

  {

  position:absolute;

  left:100px;

  top:150px;

  }

如果两个元素重叠，则看z-index值的大小，显示z-index值最大的，默认的 z-index 是 0。Z-index 1 拥有更高的优先级。

2.通过相对定位，元素可以放置到页面上的任何位置，本身位置发生变化，而元素所占的物理空间还是存在，另外还有一点，定位后如果与原本那个位置上有元素，则与之重叠，两个元素都会显示

h2
  {
  position:relative;
  left:100px;
  top:150px;
  }

3.float

前两步，使用绝对定位都并不是很理想，那么我们可以考虑使用float来解决。我们可以在一个元素上使用float，让元素向左或向右，

而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用）。下面来模拟一下 float：left/right

4.为了让浮动元素的父元素不在处于塌陷状态下，我们需要对浮动元素进行清除浮动： clear:both;

5.fixed 固定在屏幕的某个位置 不管下滑上滑都不会变位置

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <style type="text/css">

#help{

    width:100%;

    height:50px;

    background-color:#ffff33;

    position:fixed;

    left:0px;

    bottom:0px;bottom

	color:red;

}

#top{

    width:100%;

    height:800px;

    background-color:#ff6600;

}

</style>

 <body>

 <div id="top"></div>

  <div id="help"><center><h2>我是底部P标签</h1></center></div>

 </body>

</html>

　　

CSS position 属性的更多相关文章

  1. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  2. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  3. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  4. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

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

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

  6. css position属性

    absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...

  7. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  8. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  9. CSS - position属性小结

    Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...

随机推荐

  1. POJ 3020 Antenna Placement（无向二分图的最小路径覆盖）

    (￣▽￣)" //无向二分图的最小路径覆盖数=顶点总数-最大匹配数/2(最大匹配数=最小点覆盖数) //这里最大匹配数需要除以2,因为每两个相邻的*连一条边,即<u,v>和< ...

  2. JavaEE 配置文件 应用首选项存储

    JavaEE 配置文件 应用首选项存储 @author ixenos 什么是首选项? 首选项Preferences 指配置信息 首选项存储就是指对配置信息的存储   有什么方式存储? 有两种,一种存于 ...

  3. 可靠通信的保障 —— 使用ACK机制发送自定义信息——ESFramework 通信框架4.0 快速上手（12）

    使用ESPlus.Application.CustomizeInfo.Passive.ICustomizeInfoOutter接口的Send方法,我们已经可以给服务端或其它在线客户端发送自定义信息了, ...

  4. Java comparable 和 comparator

    一.comparator 接口继承 public class ComparatorTest { /** * @param args */ public static void main(String[ ...

  5. LoadLibrary 失败 GetLastError 126

    这个错误可能是 Load的库依赖另外的库,而其依赖的库不存在,也会返回这个错误!

  6. 图片拉伸：resizableImageWithCapInsets

    iOS 5.0 在iOS 5.0中,UIImage有一个新方法可以处理图片的拉伸问题 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)ca ...

  7. 洛谷-A+B Problem-洛谷的第一个任务

    题目描述 Description 输入两个整数a,b,输出它们的和(a,b<=10^9)  输入输出格式 Input/output 输入格式:两个整数以空格分开输出格式:一个数  输入输出样例  ...

  8. Unlocker(强力删除文件工具) 1.9.2 汉化绿色版

    软件名称: Unlocker(强力删除文件工具) 1.9.2 汉化绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 5 ...

  9. Asp.Net MVC 在后台获取PartialView、View文件生成的字符串

    在Asp.net MVC的实际开发中,有时需要在后台代码中获取某个View 或者 PartialView 生成的字符串,示例如下: 1. 将View文件输出为字符串: /// <summary& ...

  10. Neutron 不健全的HA ROUTER

    首先介绍下HA,所谓的HA就是高可用性,但HA有双主.主备两种工作模式,其中主备模式又包含抢占与 非抢占两种方式,而Neutron Router采用的无疑是HA中最简单的工作方式非抢占主备模式. HA ...