小白的css定位法则

CSS是通过position属性来确定定位的并开始进行5种不同类型的定位的,下面我会一一举例5种定位的使用方法。
首先,先了解第一个属性值static静态定位,它是position的默认值,不会识别坐标left、right、top、bottom。所以就是安静的状态就好。
第二个定位类型,绝对定位absolute。从三点记住绝对定位,一参照物按照已有定位的父元素进行变化。二如果没有父元素或者父元素没有定位的情况下会以整个文档为参照物。三脱离文档流不占据空间。在这里插入图片描述
在这里插入图片描述
打出以上代码你就会知道,最重要的一点是子元素是绝对定位的话,父元素要相对定位。绝对定位是将元素依据最近已经绝对、固定或相对定位的父元素进行定位。就是两者相辅相成,网页布局的时候子绝父相用的最多。
第三种相对定位relative,相对于原文档流的位置进行定位占空间但不破坏文档流。在这里插入图片描述
在这里插入图片描述
第四个fixed固定定位,以浏览器窗口为参照物,脱离整个文本流不占空间。固定定位是绝对定位的一种特殊类型,当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。所以不管浏览器如何滚动,它始终不动。在这里插入图片描述
在这里插入图片描述
第五个粘性定位sticky。它是relative和fixed的结合。有两种可能,如果页面没有超出窗口范围,按照relative执行,超出按照fixed执行。切记在使用时sticky只在其父元素中有用,而且父元素的告诉不能低于sticky。必须指定top left right bottom其中一个才能使粘性定位生效。在这里插入图片描述
在这里插入图片描述此时是疫情在家的第N天,夜已深。小白带你敲代码到深夜,让你在家期间逆战而行有事做,等出门时有代码加持。今天就分享到这里该休息啦,我们一起加油。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值