CSS position 属性

 

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 : 绝对定位。将对象从文档流中拖出,使用leftrighttopbottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白边框。相对于position属性非static值的最近父级元素进行偏移,如果父级都是static(文档流),则相对整个文档进行偏移。偏移后,原来的空间会被其他元素挤占 
relative : 相对定位。对象不能想绝对定位一样层叠,但可依据leftrighttopbottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。

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>

  

 

 

 

 

posted @ 2015-08-27 21:07  白色的回忆  阅读(227)  评论(0编辑  收藏  举报