1215zxx日报

CSS定位

CSS定位是基于盒子模型的,可分为静态static定位,绝对absolute定位,相对relative 定位,固定fixed定位。

盒子模型:
在这里插入图片描述

static :对象遵循正常文档流,top、right、bottom、left等属性无效。
absolute:对象脱离正常文档流,使用left、right、top、bottom等属性进行定位,其层叠可通过css z-index属性定义,此时对象不具有margin边距,但仍有补白和边框border。absoulte定位虽然号称“绝对”,但是它的功能却更接近于“相对”一词,因为使用absoulte定位的元素脱离文档流后,就只能根据祖先类元素(父类及以上)进行定位,而这个祖先类还必须是以postion非static方式定位的, 举个例子,a元素使用absoulte定位,它会从父类开始找起,寻找以position非static方式定位的直系祖先类元素,直到标签为止,这里还需要注意的是,relative和static方式在最外层时是以标签为定位原点的,而absoulte方式在无父级是position非static定位时是以作为原点定位,和元素相差9px左右。
relative:对象遵循正常文档流,相对于对象左上角位置(移动前)进行定位,移动后仍占据原空间,对象不可层叠,但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

<!doctype html>
<style>
html{border:1px dashed green;}
body{border:1px dashed yellow;}
#first{
width:200px;
height:200px;
border:1px solid red;
position: relative;
color:red;
}
#second{
width:200px;
height:200px;
color:blue;
border:1px solid blue;
position: absolute;
top:0;
left:0;
}
</style> ``<body>
<div id="first">relative</div>
<div id="second">absolute</div>
</body>

fixed:对象脱离正常文档流,使用top、right、bottom、left等属性以窗口左上角为参考点进行定位,当出现滚动条时,对象不会随着滚动,其层叠通过z-index属性定义。
overflow:如果一个元素的大小固定,但其内容放不下,就会导致溢出,overflow控制溢出部分的可见visible、不可见hidden、滚动可见scroll、自动auto、 继承inherit、默认值为visible。
文档流:将浏览器窗体内部自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值