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 布局方式总结

相关推荐
木木黄木木4 分钟前
HTML5 Canvas弹跳小球游戏开发实战与技术分析
前端·html·html5
Anlici37 分钟前
Axios 是基于 Ajax 还是 Fetch?从源码解析其实现
前端·面试
一个处女座的程序猿O(∩_∩)O41 分钟前
Vue 中的 MVVM、MVC 和 MVP 模式深度解析
前端·vue.js·mvc
鱼樱前端44 分钟前
前端程序员集体破防!AI工具same.dev像素级抄袭你的代码,你还能高傲多久?
前端·javascript·后端
2301_764441331 小时前
小说文本分析工具:基于streamlit实现的文本分析
前端·python·信息可视化·数据分析·nlp
jackl的科研日常1 小时前
“个人陈述“的“十要“和“十不要“
前端
一个处女座的程序猿O(∩_∩)O1 小时前
Vue 中 this 使用指南与注意事项
前端·javascript·vue.js
大有数据可视化2 小时前
数字孪生像魔镜,映照出无限可能的未来
前端·html·webgl
一个处女座的程序猿O(∩_∩)O2 小时前
使用 Docker 部署前端项目全攻略
前端·docker·容器
bin91532 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_10空状态的固定表头表格
前端·javascript·vue.js·ecmascript·deepseek