AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

「CSS」知识点笔记：position

2023-03-02 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 「CSS」知识点笔记：position

前言

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

CSS position

作用

规定元素的定位类型

说明

  • 这个属性定义建立元素布局所用的定位机制
  • 任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。
  • 相对定位元素会相对于它在正常流中的默认位置偏移。

在这里插入图片描述

可能的值

在这里插入图片描述

absolute

  • 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

示例1

<html>
<head>
    <style type="text/css">
        .item_1 {
            background-color: #eea2a4;
            width: 500px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>
<body>
    <div class="item_1"></div>
</body>
</html>

相对于浏览器进行定位，效果图如下：
在这里插入图片描述

示例2

<html>
<head>
    <style type="text/css">
    .item_0{
        background-color: #eea6b7;
            width: 500px;
            height: 300px;
    }
        .item_1 {
            background-color: #eea2a4;
            width: 500px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>
<body>
    <div class="item_0"></div>
     <div class="item_1"></div>
</body>
</html>

item_0和item_1是并列关系，item_1的父元素还是理解为是浏览器，所以还是相对于浏览器定位，效果图如下：
在这里插入图片描述

示例3

<html>
<head>
    <style type="text/css">
        .item_-1 {
            background-color: #951c48;
            width: 500px;
            height: 300px;
        }
        .item_0 {
            background-color: #eea6b7;
            width: 500px;
            height: 300px;
        }
        .item_1 {
            background-color: #eea2a4;
            width: 500px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>
<body>
    <div class="item_-1"></div>
    <div class="item_0"></div>
    <div class="item_1"></div>
</body>
</html>

item_-1、item_0和item_1是并列关系，item_1的父元素还是理解为是浏览器，所以还是相对于浏览器定位，效果图如下：
在这里插入图片描述

示例4

<html>
<head>
    <style type="text/css">
        .item_-2 {
            position: fixed;
            top: 100px;
            left: 100px;
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
        }
        .item_-1 {
            background-color: #951c48;
            width: 500px;
            height: 300px;
        }
        .item_0 {
            background-color: #eea6b7;
            width: 500px;
            height: 300px;
        }
        .item_1 {
            background-color: #eea2a4;
            width: 500px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>
<body>
    <div class="item_-2"></div>
    <div class="item_-1"></div>
    <div class="item_0"></div>
    <div class="item_1"></div>
</body>
</html>

item_1的父元素依旧可以理解为浏览器，item_-2的定位是fixed，依据浏览器定位，但是item_-2与item_1不是父元素与子元素的关系，只是并列，没有影响
在这里插入图片描述

示例5（重点）

<html>
<head>
    <style type="text/css">
        .item_a {
            position: fixed;
            top: 100px;
            left: 100px;
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
        }
        .item_b {
            background-color: #eea2a4;
            width: 500px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>
<body>
    <div class="item_a">
        <div class="item_b"></div>
    </div>
</body>
</html>

item_a是位置属性是fixed，且是item_b的父元素，根据absolute的定义：除static以外的第一个父元素，可以得出，item_b的定义的参照item_a的，效果图如下：
在这里插入图片描述

总结：在使用absolute时，首先应该找到除static以外的第一个父元素，再依据这个父元素进行定位

fixed

示例1

<html>
<head>
    <style type="text/css">
        .item_a {
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
            position: fixed;
            top: 200px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="item_a">
    </div>
</body>
</html>

依据浏览器定位，效果图如下：
在这里插入图片描述

示例2

<html>
<head>
    <style type="text/css">
        .item_a {
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
            position: fixed;
            top: 200px;
            left: 100px;
        }
        .item_b {
            background-color: #101f30;
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="item_b"></div>
    <div class="item_a">
    </div>
</body>
</html>

依据浏览器定位，效果图如下：
在这里插入图片描述

示例3

<html>
<head>
    <style type="text/css">
        .item_a {
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
            position: fixed;
            top: 200px;
            left: 100px;
        }
        .item_b {
            background-color: #101f30;
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="item_b">
        <div class="item_a"></div>
    </div>
    </div>
</body>
</html>

尽管item_b是item_a的父元素，但是item_a的位置属性是fixed，依然是依据浏览器定位，效果图如下：
在这里插入图片描述

总结：fixed无论什么情况下，都是依据浏览器进行定位！

relative

示例1

<html>
<head>
    <style type="text/css">
        .item_a {
            background-color: #51c4d3;
            width: 500px;
            height: 300px;
        }
        .item_b {
            background-color: #101f30;
            width: 500px;
            height: 300px;
            position: relative;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="item_a"></div>
    <div class="item_b"></div>
    </div>
</body>
</html>

相对于正常位置进行定位，效果图如下：

在这里插入图片描述
正常位置
在这里插入图片描述

总结：relative是依据其元素的正常位置进行定位的

结语

学习于：

https://www.w3school.com.cn/cssref/pr_class_position.asp

结合教程学习基础，同时再动手敲代码。

上述理解仅为个人理解，如有不正确的地方，欢迎您的指出～

文章标签：
C++
C语言
前端开发
Linux
程序员
关键词：
CSS知识点
CSS Position
CSS笔记
haihonghong
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
69 2
进步`于辰
|
18天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
30 1
[HTML、CSS]知识点
游客zi3qmblbcdexu
|
27天前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
24 3
游客zi3qmblbcdexu
|
27天前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
43 2
派大鑫的工作室
|
1月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
派大鑫的工作室
36 0
周一同学Zelina
|
2月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点，包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
周一同学Zelina
21 0
土木林森
|
3月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力？带你彻底理解粘性定位的奇妙世界！
【8月更文挑战第20天】在前端开发中，CSS的粘性定位（`position: sticky`）是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位，达到指定阈值时转为固定定位，非常适合制作“吸顶”导航栏等。例如，设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏，还可应用于侧边栏等，增强布局灵活性与用户体验。尽管如此，仍需注意不同浏览器间的兼容性和可能的布局冲突。
土木林森
151 0
孙飞i
|
3月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记（3）
理解CSS | 青训营笔记（3）
孙飞i
35 0
孙飞i
|
3月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记（2）
理解CSS | 青训营笔记
孙飞i
36 0
孙飞i
|
3月前
|
前端开发 容器
理解CSS | 青训营笔记（1）
理解CSS | 青训营笔记
孙飞i
51 0