首页 > 代码库 > CSS中的定位
CSS中的定位
普通定位
positiont:static
普通文档流中的元素的position的默认值为static,无需主动声明。忽略top、right、bottom、left和z-index。
相对定位
position:relative
.relative{ position:relative; left:20px; top:20px; }
拥有relateive类的元素将相对于原来的位置向右移动20px,向下移动20px。而且无论怎么移动,元素也依旧会占据原来的位置。
绝对定位
position:absolute
绝对定位的元素与文档流无关,因此不占据任何空间。
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。若没有这样的父元素,那么它的位置是相对于初始包含块。
固定定位
position:fixed
生成固定定位的元素,相对于浏览器窗口进行定位。
开源中国中右下角绿色的”top“功能,就是这样定位。
通过chrome的开发工具查看了下,代码是这样的。
<div id="topcontrol" title="回到顶部" style="position: fixed; bottom: 165px; right: 100px; cursor: pointer; display: block;"> <img src=http://www.mamicode.com/"/img/gotop.gif" style="width:31px; height:31px;">>
浮动
float:left | right
浮动的元素不在普通文档流中,因此文档流中的块框表现得就像浮动元素不存在一样。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。