Css Position定位(简易版本)

时间:2023-12-04 12:42:44

准备前的知识:

定位只对块级起作用。如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可。

开始讲解:

定位共四种:static,fixed,relative,absolute.

第一种:static为div默认,top,left,bottom,right无用。

Css Position定位(简易版本)

第二种:fixed为固定定位。

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动.
Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

Css Position定位(简易版本)

第三种:relative为相对定位

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

Css Position定位(简易版本)

第四种:absolute为绝对定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

Css Position定位(简易版本)

总结:

序列 position定位属性 是否占空间 是否与元素重叠
1 fixed 不占   重叠
2 relative 占   可以控制top,left与其他元素重叠
3 absolute 不占 重叠

常用技巧:
relative与absolute配合使用:
最外div使用relative定位,里面用absolute定位。