CSS 定位

静态定位(默认值) position:static;

就是默认的文档流布局,元素处于文档流中,只能依次排列,不能随意改变自己的位置

使用其他定位属性后,可以让元素通过 top/bottom/left/right 四个属性移动

层级 z-index:使用定位后,元素发生重叠时可以调整层级

  1. z-index 的值越大,层级越高,值大的元素会覆盖值小的元素
  2. 值为整数值,没有任何单位
  3. 默认值是 auto,可以看作是层级 0,z-index 还可以取负值

相对定位 position:relative;

移动参照物:元素自己原来的位置

  1. 不会脱离文档流并保留原有位置,还可以支撑父元素,不影响父级
  2. 与外间距 margin 的区别:margin 会影响其他元素,相对定位不会挤开兄弟元素,但可能会遮盖
  3. 常用于需要微调元素位置时使用
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
            /* 注意!要先加position才能移动位置 调整层级 */
            position: relative;
            z-index: 10;/*整数 默认0 数值越大 层级越高 */
            left: 25px;
        }
        .z2 {
            background-color: #0f0;
            /*相对定位
            移动参照物:自己原来的位置
            不脱离文档流 不释放布局空间 也不会挤开其它元素*/
            position: relative;
            left: 50px;
            bottom: 50px;
            z-index: -1;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

绝对定位 position:absolute;

移动参照物:离自己最近的使用了非静态定位属性的上层元素

会一路向上找,终点是 html 根元素

  1. 绝对定位的元素会脱离文档流,释放布局空间
  2. 小技巧:"子绝父相"子元素使用绝对定位,父级设置相对定位后就可以变成子元素移动的参照物
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .fu {
            background-color: #ff0;
            position: relative;
            width: 500px;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            position: absolute;
            top: 0;
            right: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

固定定位 position:fixed;

移动参照物:html 根元素(浏览器窗口)

  1. 固定定位也会脱离文档流
  2. 我们可以利用固定定位实现页面固定广告与撑满全屏的效果
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fu {
            background-color: #ff0;
        }
        .fu>div {
            width: 100px;
            height: 100px;
        }
        .z1 {
            background-color: #f00;
        }
        .z2 {
            background-color: #0f0;
            /* 固定定位 参照物为html元素 会脱离文档流 释放布局空间 */
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>

4.5 布局方式总结

相关推荐
Anlici22 分钟前
跨域解决方案还有优劣!?
前端·面试
庸俗今天不摸鱼28 分钟前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
陈随易1 小时前
告别Node.js:2025年,我为何全面拥抱Bun
前端·后端·程序员
还是鼠鼠1 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
CQU_JIAKE1 小时前
2.5[frontEnd]
前端
Moment1 小时前
前端性能指标 —— FMP
前端·javascript·面试