<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .innerDiv{ width: 100px; height: 100px; } .d1{ background-color: rgb(235, 159, 159); /* position: static; */ /* top left right bottom */ /* position: absolute; left: 300px; top: 100px; */ /* position: relative; left: 30px; top: 30px; */ position: fixed; right: 30px; top: 30px; } .d2{ background-color: rgb(231, 146, 44); } .d3{ background-color: rgb(180, 180, 235); } </style> </head> <body> <!-- css定位 --> <!-- 不设置定位的值时 是静态定位 static --> <!-- 静态定位 就是没有定位 元素出现在该出现的位置 块级元素垂直排列 行内元素水平排列--> <!-- 绝对定位 absolute 元素在页面上固定位置 此时会让出原来的位置 其他元素可以占用--> <!-- 相对定位 relative 相对于原来的位置定位 定位后保留原来位置 其他元素不占用 --> <!-- 固定定位 fixed 不会随着页面的上下移动而移动。此时会让出原来的位置 --> <div class="innerDiv d1">框1</div> <div class="innerDiv d2">框2</div> <div class="innerDiv d3">框3</div> </body> </html>