关于css元素定位position的理解

文章共297个字 读完大约需要1分钟

现在很网站中,在页头会出现一种类似于页卡的效果,以前做这种需求的时候都是让其根据父元素相对定位,这样会造成其脱离文档流,而后兄弟元素跟着相对定位,实现起来较为麻烦,而且灵活性不高。

position-relative

今天偶然的使用了绝对定位,让其相对于自身原来位置移动,实现如上需求后,代码简洁,而且很灵活,不必再为高度和margin苦恼。

关于定位属性position一共有四个值,分别是staticrelative,absolutefixed,定位会改变元素的形态,所有的元素均转化为块级元素。

static

元素正常显示,转化为块级元素。

relative

绝对定位,元素相对于自身进行某个位置的偏移,元素任然保持其未定位前的状态,它原本所占的空间仍然保留。

absolute

相对定位,元素脱离文档流,并相对于其父级或者父级之上设置了定位的元素进行位置的偏移。

fixed

固定定位,元素相对于浏览器窗口进行定位。

推荐文章

-->