css定位：相对定位

浏览数：38 / 时间：2015年06月09日

关于相对定位的结论如下
1. 使用相对定位的盒子，会相对于它原来的位置，通过偏移指定的距离，到达新的位置。
2.使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。

<html>
 <head>
 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
 <title>无标题文档</title>
 <style type=”text/css”>
body{
 margin:15px;
 font-family:Arial;
 font-size:12px;
 }
 .father{
 background-color:#ffff99;
 border:1px solid #000000;
 padding:20px;
 }
 .father div{
 background-color:#00ff00;
 padding:10px;
 border:1px dashed #000000;
 }
 #block2{

}

</style>
 </head>
 <body>
 <div class=”father”>
 <div>Box-1</div>
 <div id=”block2″>Box-2</div>
 <div>Box-3</div>
 </div>
 </body>
 </html>

static（静态定位）为默认值，即在原本应该在的流布局上，从左到右，从上到下。

relative（相对定位），通过设置position属性为relative，在设置具体方向的偏移量来实现，top   left  right botton
修改代码如下，即可发现box-2偏移了，但对box-3没影响，
#block2{
 position:relative;
 left:30;
 top:20;
 }

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 src 使用 com log html http class style 代码 src 使用 com log html http

相关文章

随机文章

您可能还喜欢

您可能还喜欢