相对定位,绝对定位,固定定位

相对定位

概念:

相对于自身位置定位

特点:

1.未脱离文档流,因此不会影响其他元素

2.元素偏移后,其原来的位置还会占着文档流

3.改变元素的border或边距属性会对其他元素造成影响,因为相当于改变了原位置的大小

4.设置position属性(除了默认static)都会激活top/right/left/bottom属性。正值表示向中心方向偏移,负值表示向两侧偏移

5..一般用来辅助绝对定位

绝对定位

概念:

相对于距离最近的父元素定位

特点:

1.脱离文档流。后边的元素会顶上来占用元素位置

2.元素未设置宽高,可以通过上下左右偏移量设置宽高

3.设置了绝对定位的元素,若该元素是行内元素可以设置宽高

4.设置了绝对定位的元素之间会出现压盖现象,后边的会压盖前边的

5.绝对定位实现居中,left和top设为50%,此时元素左顶点在中心,所以需要向上移动宽/高的一半,即margin-top:-height/2; margin-left:-width/2

6.基于父元素的padding处开始定位

固定定位

概念:

相对于浏览器视口进行定位

特点:

1.脱离文档流。后边的元素会顶上来占用元素位置

2.设置了绝对定位的元素,若该元素是行内元素可以设置宽高

3.元素未设置宽高,可以通过上下左右偏移量设置宽高

应用:

百度的侧边栏,要想其位置不随页面大小变化而改变就要将偏移量设置未百分比的形式。

    

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容