码迷,mamicode.com
首页 > Web开发 > 详细

CSS position 属性

时间:2015-08-27 22:33:13      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

 

position: relative | absolute | static | fixed 

 参考网站:http://www.jb51.net/css/22213.html

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

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

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

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


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

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

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

 

3.float

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

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

 

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

 

 

 

CSS position 属性

标签:

原文地址:http://www.cnblogs.com/lizhenlin/p/4764636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!