<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
