CSS

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

2020-07-14  本文已影响0人  埼玉的头发

相对定位

概念:

相对于自身位置定位

特点:

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.元素未设置宽高,可以通过上下左右偏移量设置宽高

应用:

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

    

上一篇 下一篇

猜你喜欢

热点阅读