CSS定位详解

**1.**相对定位

1.1 如何设置相对定位?
给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
1.2 相对定位的参考点在哪里?
相对自己原来的位置
1.3 相对定位的特点:
1. 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
默认规则是:
定位的元素会盖在普通元素之上。都发生定位的两个元素,后写的元素会盖在先写的元素之上。
3. left 不能和 right 一起设置, top 和 bottom 不能一起设置。
4. 相对定位的元素,也能继续浮动,但不推荐这样做。
5. 相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。

css 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_相对定位</title>
    <style>
        .outer{
            width: 500px;
            background-color: aquamarine;
            border: 1px solid black;
            padding: 20px;
        }
        .box{
            width: 100px;
            height: 100px;
            font-size: 20px;
        }
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: green;
            position: relative;
            left: 10px;
        }
        .box3 {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

注意:绝大多数情况下,相对定位,会与绝对定位配合使用。

**2.**绝对定位

2.1 如何设置绝对定位?
给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位的参考点是参考它的 包含块

什么是包含块?
1. 对于没有脱离文档流的元素:包含块就是父元素;
2. 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都
没定位,那包含块就是整个页面)

口诀:子绝父相(子元素开启绝对定位,父元素就要开启相对定位)

鼠标浮动在父元素上,盒子2向右移动200px

css 复制代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_绝对定位</title>
    <style>
        .outer {
            width: 500px;
            background-color: aquamarine;
            border: 1px solid black;
            padding: 20px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            font-size: 20px;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            background-color: green;
            /* 给2开启了绝对定位,他就脱离了文档流 3就占领了2的位置 */
            position: absolute;
    
        }

        .box3 {
            background-color: hotpink;
        }

        .outer:hover .box2{
            right: 200px;

        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

</html>
相关推荐
csdn_aspnet5 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel28 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE28 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子32 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
Zevalin爱灰灰37 分钟前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
小宁爱Python40 分钟前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
冰糖猕猴桃44 分钟前
【Python】进阶 - 数据结构与算法
开发语言·数据结构·python·算法·时间复杂度、空间复杂度·树、二叉树·堆、图
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax