【JavaScript】div+css定位position详解


  1、div+css中的定位position 最主要的两个属性:absolute(绝对定位)、relative(相对定位)

   (1)absolute(绝对定位),位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。

   (2)relative(相对定位),定位是相对的,那他是相对于什么呢?参照物是什么?

   看代码:

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style>

<div id="left"></div>

<div id="center"></div>

<div id="right"></div>
</span>
  效果:

     

  2、relative(相对定位),给中间的div增加定位属性:position:relative; top:10px; left:10px;

  代码:

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;position:relation;top:<span style="font-family:KaiTi_GB2312;">1</span>0px;left:<span style="font-family:KaiTi_GB2312;">1</span>0px;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style>

<div id="left"></div>

<div id="center"></div>

<div id="right"></div></span>
  效果:

     

  结果:很明显它现在移动的参照物就是它原来所占据的位置

  注意:位置属性 top、 right 、left 、bottom 只能引用相邻的两个边,不能只用上下,或者只用左右。

  3、absolute(绝对定位),给中间的div增加定位属性:position:absolute; top:30px; left:30px;

  代码:

<span style="font-size:18px;"><style type="text/css">
 #left{background:#cccccc;width:200px;height:200px;float:left;}
 #center{background:#eee;width:200px;height:200px;float:left;position:absolute;top:30px;left:30px;}
 #right{background:#666666;width:200px;height:200px;float:left;}
</style></span>

  效果:

     

  结果:

  发现中间的div脱离了文档流,右侧的和左侧div挨着了,现在中间的div的位置是从浏览器的左上角开始计算位置即向下移动30像素,向右移动30像素。现在就涉及到一个层级的关系,设置div的z-index属性,数值越大的,层显示在最上边。

   想要了解更多的小伙伴们可以点击这里:

   CSS 相对|绝对(relative/absolute)定位系列(一)


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值