关于position的四个标签

本文详细解析了CSS中的四种定位方式:static、relative、absolute和fixed,通过实例代码展示了它们的工作原理和应用效果。static为默认定位,relative使元素相对于其正常位置进行偏移,absolute根据最近的已定位祖先元素定位,fixed则相对于浏览器窗口定位。

四个标签是static,relative,absolute,fixed。

static 该值是正常流,并且是默认值,因此你很少看到(如果存在的话)指定该值。

relative:框的位置能够相对于它在正常流中的位置有所偏移

absolute:使用x和y坐标,根据包含元素的左上角精确地定位框的位置

fixed:位置是根据浏览器窗口的左上角计算出来的,并且即使用户滚动窗口,也不会改变位置。

 

部分源代码:

  html:

  <div class ="box" id="one">One</div>
   <div class ="box" id ="two"> Two</div>
  <div class ="box" id ="three"> Three </div>
  <div class ="box" id ="four">Four</div>

  css:

  

.box {
display:inline-block ;
height:100px;
width:100px;
background:rgba(255, 217, 0, 0.863);
color: rgba(255, 255, 255, 0.295);
}

#two {
position: relative;
top: 20px;
left: 20px;
background: rgba(255, 0, 212, 0.582);
}
 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/sky2737/p/9744699.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值