web前端工作中CSS的position属性

对于童鞋网站开发来说,位置属性必须非常熟悉。在css网站的制作中,position属性也有一定的位置。下面我们来看看position属性是如何解释的?在w3school:defin…

对于童鞋网站开发来说,位置属性必须非常熟悉。在css网站的制作中,position属性也有一定的位置。下面我们来看看position属性是如何解释的?在w3school:definitionandusage:position属性指定元素的定位类型。说明:此属性定义用于建立元素布局的定位机制。任何元素都可以定位,但绝对元素或固定元素将生成块级别的框,而不管元素本身的类型如何。相对定位的元素将从其在正常流中的默认位置偏移。与位置属性对应的值为1。位置:静态;默认值。如果没有定位,元素将出现在正常流中(忽略top、bottom、left、right或z-index声明)。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,内联元素创建一个或多个行框并将其放置在其父元素中。2position:inherit;inherit值与其他css属性的inherit值相同,即继承父元素的position值。三。位置:相对;相对定位,相对于其初始位置,不偏离文档流。这就是说,元素框架偏移了一定的距离,元素仍然保持其未定位的形状,并且保留了它最初占据的空间。三。位置:绝对;绝对定位元素的位置相对于最近定位的祖先元素。如果元素没有定位的祖先元素,则其位置相对于原始包含块。4位置:固定,固定要素不在正常的单据流中,与绝对要素非常相似,也会被周围要素忽略。它支持top、bottom、left和right属性,但fixed元素与其名称相同。固定在屏幕上的某个位置,它不会随着浏览器的滚动条滚动。比如我们常见的返回顶部功能,按钮总是在浏览器的左下角,无论滚动条如何滚动,按钮都会固定在左下角。这个要求可以通过使用position:fixed来完成。但是,应该指出的是位置:固定有兼容性问题,不支持IE6、IE7和IE8。这可以通过将position:absolute设置为元素并从顶部获得滚动条的高度加上一个固定的高度来实现。5位置:粘性;很多学生会不熟悉这个属性,这是一个相对较新的属性值。sticky的原意是粘贴,可以称之为粘性定位,但它在css中的表现更像是吸附。这是一种特殊的定位,它结合了位置:相对和位置:固定两种定位功能。此属性非常适用于常见的天花板和底部吸力(网站的头部返回栏、底部开关栏等)的效果。

作者: guangdongseo

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部