一.知识点
定位:基于XXX定位,上下左右~
- 没有父级元素的情况下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或者浏览器的位置,进行指定的偏移,绝对位置的话,它不在标准文档流之中,原来的位置不会被保留
二.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 600px; } div:nth-of-type(1){ width: 90px; height: 90px; background: #37d6aa; position: absolute;/*绝对定位*/ right: 0; bottom: 150px; } div:nth-of-type(2){ width: 50px; height: 50px; background: blanchedalmond; position: fixed;/*固定定位*/ right: 0; bottom: 50px; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>
三.运行结果