CSS教程:position属性

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。所以实际上可用的值只有3个为了方便阅读~
以下统称为：固定(fixed)、相对(relative)、绝对(absolute).

第1：固定定位(fixed)

固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:fixed属性相似！但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览

例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div> <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行</td> </tr> <tr> <td><p>凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：<a href="http://www.lingzhong.cn">http://www.lingzhong.cn</a> 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!</p> </td> </tr> </table> </div> <div class="page"><a href="13559.htm" class="current">1</a><a href="13559-2.htm">2</a><a href="13559-3.htm">3</a><a href="13559-4.htm">4</a><a href="13559-2.htm">下一页</a><div style="clear:both;"></div></div> <div id="jiathis">  <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <a style="background:none;">分享到：</a> <a class="bds_qzone"></a> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_renren"></a> <a class="bds_baidu"></a> <a class="bds_douban"></a> <a class="bds_kaixin001"></a> <a class="bds_t163"></a> <a class="bds_tsohu"></a> <span class="bds_more">更多</span> <a class="shareCount"></a> </div> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=460515" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours(); </script>  <div style="clear:both;"></div> </div> <div id="likeart"> <div class="liketitle">你可能对下面的文章感兴趣</div> <div class="likebox"> <ul> <li><a href="http://www.lingzhong.cn/tech/21873.htm" title="C#读取txt文件和html页面" target="_blank">C#读取txt文件和html页面</a></li> <li><a href="http://www.lingzhong.cn/tech/34475.htm" title="Photoshop教程:调暗色调的模特照片实用方法" target="_blank">Photoshop教程:调暗色调的模特照片实用方法</a></li> <li><a href="http://www.lingzhong.cn/tech/12110.htm" title="谈谈新手如何选择好域名的几个建议" target="_blank">谈谈新手如何选择好域名的几个建议</a></li> <li><a href="http://www.lingzhong.cn/tech/26557.htm" title="通过数字来判断Linux系统分区的类型" target="_blank">通过数字来判断Linux系统分区的类型</a></li> <li><a href="http://www.lingzhong.cn/tech/49937.htm" title="Flash MX实战精选：制作网站标志(1)" target="_blank">Flash MX实战精选：制作网站标志(1)</a></li> <li><a href="http://www.lingzhong.cn/tech/44395.htm" title="空白密码引发Windows 2008远程连接失败" target="_blank">空白密码引发Windows 2008远程连接失败</a></li> <li><a href="http://www.lingzhong.cn/tech/19574.htm" title="win7与fedora双系统安装" target="_blank">win7与fedora双系统安装</a></li> <li><a href="http://www.lingzhong.cn/tech/37327.htm" title="Photoshop曲线和通道混合器调婚纱照片" target="_blank">Photoshop曲线和通道混合器调婚纱照片</a></li> <li><a href="http://www.lingzhong.cn/tech/17588.htm" title="SQL点滴5—“微软不认识闰年2月29日”&字符" target="_blank">SQL点滴5—“微软不认识闰年2月29日”&字符</a></li> <li><a href="http://www.lingzhong.cn/tech/26926.htm" title="避免linux脚本多次运行" target="_blank">避免linux脚本多次运行</a></li> </ul> </div> <div style="clear:both;"></div> </div> <div class="prenext"><span class="pre">上一篇: <a href='http://www.lingzhong.cn/tech/13560.htm'>CSS3教程(9):设置RGB颜色</a></span><span class="next">下一篇: <a href='http://www.lingzhong.cn/tech/13558.htm'>CSS3教程(3):border-color网页边框色彩</a></span> <div style="clear:both;"></div> </div>  <div class="comment"> <div class="more"> <a href="http://www.lingzhong.cn/tech/plus/comment/?id=13559">关于CSS教程:position属性的所有评论</a> </div>  <div class="list"> <script language="JavaScript" type="text/javascript" src="http://www.lingzhong.cn/tech/plus/comment/js.asp?id=13559"></script> </div>  <div class="post"> <form action="http://www.lingzhong.cn/tech/plus/comment/save.asp" method="post"> <input type="hidden" name="id" value="13559"> <label for="user">昵称</label> <input name="user" type="text" class="input" /> <label for="content">评论内容</label> <textarea name="content" cols="70" rows="6" class="textarea" onfocus="if($('sn').innerHTML.length==0){geturl('http://www.lingzhong.cn/tech/plus/comment/getcode.asp?'+Math.random(),'sn');}">

随机推荐

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁）邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号