CSS中的定位
浏览数：21 /
时间：2015年06月09日
普通定位
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="/img/gotop.gif" style="width:31px; height:31px;"> </div>
浮动
float：left | right
浮动的元素不在普通文档流中，因此文档流中的块框表现得就像浮动元素不存在一样。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
