层模型

position: absolute | relative | fixed
值:left / right / top / bottom : 100px; (以px为单位)

  1. position: absolute(绝对定位)
    脱离原来位置进行定位(脱离层面)(不占空间)
    absolute相对与最近的有定位的父级元素进行定位,如果没有,那么相对于文档进行定位
    z-index:1; 设置层数,数字越大层数越靠上
  2. position: relative(相对定位)
    保留原来位置进行定位(占原来所占空间的大小)
    relative相对于自己原来的位置进行定位

一般以relative当作标杆,用absolute进行定位,防止对后续元素的破坏

  1. position: fixed;(固定定位)
    使元素固定在浏览器的某个位置

让一个元素在页面正中央:

div{
      position:fixed;
      left:50%;
      top:50%;               /*以左定点为移动坐标*/
      width:100px;
      height:100px;
      background-color:red;
      margin-left:-50px;
      margin-top:-50px;      /*分别向左,向上移动二分之一个身位*/
}

两栏布局:
一个div使用position: absolute属性,另一个div调整margin值为先前div的宽度。
注意:先写position: absolute的div使它先出生

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值