Html的定位position相对定位与绝对定位

2024-03-07 20:31:15

定位
/* position: relative;/*相对定位，相对自己原来的位置移动，以左上角为基准*/
position:absolute;/*绝对定位，不保留自己原来的位置，按照父级标签或者祖先级
标签，设置了position为relative的标签的位置进行移动，如果一直找不到设置了
这个标签的属性，那么按照body标签来移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .c1{ width: 100px; height: 100px; border: 2px solid red; } .c2{ width: 100px; height: 100px; border: 2px solid blue; /* position: relative;/*相对定位，相对自己原来的位置移动，以左上角为基准*/ /* top: ; */ /* left: 100px; 需要右移，相当于左边距离100px */ /* right: ; */ /* bottom: ; */ position:absolute;/*绝对定位，不保留自己原来的位置，下面的绿色顶上去了 } .c3{ width: 100px; height: 100px; border: 2px solid green; } </style> </head> <body> <div class="cc"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </div> </body> </html>

码农公寓

相关文章