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天,夜已深。小白带你敲代码到深夜,让你在家期间逆战而行有事做,等出门时有代码加持。今天就分享到这里该休息啦,我们一起加油。
小白的css定位法则
最新推荐文章于 2023-04-29 20:43:21 发布