<!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>定位与定位元素</title></head><body> <!-- 文档流：显示顺序和书写顺序一致 --> <!-- position:static --> <div class="box parent"> <div class="box child first"></div> <div class="box child"></div> </div></body></html><style> body { border: 1p solid #000; } .box { border: 1px solid #000; width: 300px; height: 400px; } .box.parent { /* 设置定位参考父级/包含块 */ position: relative; } .box.child.first { background-color: lightgreen; /*1. 相对定位 */ position: relative; top: 30px; left: 30px; /* 2.绝对定位 */ position: absolute; /* position: fixed; */ /* 相对定位：相对自身，在文档流中，绝对定位：相对包含块不在文档流中 */ /* 绝对定位，不再相对于自身，而是相对于它的包含块 */ /* 它有两个包含块（父级），.parent body,而能充当绝对定位包含块的元素，必须是“定位元素 */ /* 如果决定定位元素，一直向上，找不到可定位的父级元素，就相对body */ } .box.child { width: 150px; height: 150px; background-color: yellow; }</style>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
