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. java中的日期处理

    学习Java日期处理,看见这一篇比较详细,转载之. 转自:http://www.cnblogs.com/hqr9313/archive/2012/04/19/2458221.html   时间日期1) ...

  2. hdu_2476_String painter(区间DP)

    题目链接:hdu_2476_String painter 题意: 有a,b两字符串,现在你有一个刷子,每次可以任选一个区间,使这个区间变成你想要的字符,现在让你将a变成b,问最少刷多少次 题解: 考虑 ...

  3. chapter9_3 协同程序实现迭代器

    将循环迭代器视为"生产者-消费者"模式的一种特例:迭代器产生的数据供循环体消费. 因此,用协同程序写迭代器就理所当然了.因为协同程序可以一改传统调用者与被调用者之间的关系. 有了这 ...

  4. 洛谷-语文成绩-[有奖]洛谷5月月赛：kkksc03的三大神器

    题目背景 Background语文考试结束了,成绩还是一如既往地有问题. 题目描述 Description语文老师总是写错成绩,所以当她修改成绩的时候,总是累得不行.她总是要一遍遍地给某些同学增加分数 ...

  5. 大数据除法（Large data division）

    题目描述 Description 除法是计算中的基础运算,虽然规则简单,但是位数太多了,也难免会出错.现在的问题是:给定任意位数(足够大就可以啦O(∩_∩)O)的一个被除数,再给定一个long lon ...

  6. Linux下好用的简单实用命令

    1.你是否为在输入了一大串命令之后发现第一个字符打错了而苦恼?只能删除重来嘛?或者一步步左移光标? NO,一个组合键轻松搞定 Ctrl+A -----到命令行首 Ctrl+E ------到命令行末 ...

  7. Notepad++ V6.9.0 中文绿色便携版

    软件名称: Notepad++软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 3.4MB图片预览: 软件简介:Notepad中文版是一款非常有特色的编辑器,是开源 ...

  8. hibernate 配置文件

    hibernate.cfg.xml </session-factory> //DAO类 package com.hanqi.dao; import org.hibernate.Sessio ...

  9. 水电pd建表

    drop table ADMINSTER cascade constraints; /========================================================= ...

  10. opencv使用convexityDefects计算轮廓凸缺陷

    引自:http://www.xuebuyuan.com/1684976.html http://blog.csdn.net/lichengyu/article/details/38392473 htt ...