CSS之绝对定位和相对定位等

亦凉 2021-05-03 04:23 761阅读 0赞

1、绝对定位：

一种非常随意的定位方式，可以实现div网页的任何一个部位摆放，有点类似于坐标定位。
position:static 静态定位 relative 相对定位 fixed 固定定位 absolute绝对定位

2、相对定位：

依然占用静态定位的空间，但是可以使用left right top bottom这几个属性做偏移

2、手撕代码：

  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style type="text/css"> .div1{ 
  2.             background-color: red;
  3.             width: 400px;
  4.             height: 400px;
  5.             position: relative;
  6.             left: 500px;
  7.         }
  9.         .div2{ 
  10.             position: absolute;
  11.             background-color: black;
  12.             width: 200px;
  13.             height: 200px;
  14.             left: 100px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="div1">
  20.         <div class="div2">
  22.         </div>
  23.     </div>
  24. </body>
  25. </html>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，761人围观）

还没有评论，来说两句吧...

相关阅读