css定位：相对定位

最新推荐文章于 2024-02-14 11:51:22 发布

weixin_30408309

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量55

点赞数

原文链接：http://www.cnblogs.com/epuoo/p/4164631.html

版权

关于相对定位的结论如下
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;
}

转载于:https://www.cnblogs.com/epuoo/p/4164631.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30408309

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位：相对定位

关于相对定位的结论如下1. 使用相对定位的盒子，会相对于它原来的位置，通过偏移指定的距离，到达新的位置。2.使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> &l...
复制链接

扫一扫