web随堂笔记

114 阅读1分钟

今天学习了position定位属性

1.static默认值

2.relative相对定位

3.absolute绝对定位

4.fixed 固定定位 下面做详细的解释

1.static:默认值 表示没有定位 通过标准流方式显示

image.png

2.relative相对定位 相对于自己原来的位置进行移动到达新的位置 但原来的位置会被保留不会被替代 盒子移动的(0,0)点在左上角
偏移设置值有left/right/bottom/top 可以取负值

IMG_3027.PNG

image.png

3.absolute绝对定位

元素发生偏移后原来的位置不会保留 且从文档流中脱离 不会影响其他元素

偏移设置值有left/right/bottom/top

当设置left和top为0时(在没有被定位的祖先元素情况下 会以浏览器窗口为基准定位)

image.png 如果有已经定位的祖先元素 使用绝对定位的元素以离它最近祖先定位元素为基准

image.png

当绝对定位中不设置left和top值时 位置不会改变但是漂浮在其他元素上

image.png

4.fixed 固定定位

相对于浏览器窗口来定位 位置不会随滚动条移动

位置发生偏移后,原来的位置不会保留下来

image.png