父容器relative时，子容器设置为absolute。
为什么子容器设置为absolute，父容器要设置为relative???
父元素和子元素都用Relative不行吗？？？
使用position 和 使用float和margin有什么优缺点？？？
父容器设置为relative 子容器才会已父容器为基准来定位， relative只是相对于原来的位置进行偏移。
relative
absolute
float
margin
分别实现什么的？
写出来你的问题就破了
为什么子容器设置为absolute，父容器要设置为relative?
这个说法不严密
子容器设置为 absolute 时，父容器可以是 relative 也可以是 absolute
absolute 是父容器内的绝对定位
relative 是相对文档流默认位置的相对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> 四楼的解释很到位，还有演示效果。
简单的说postion属性是需要有参照物的，absolute是绝对定位，它自身会脱离文档流，不占用宽度和高度。一般绝对定位是需要定宽高的，不然内容不会显示。
而相对定位是需要占用宽高的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
