备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

「CSS」知识点笔记：position

2023-03-02 82
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 「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
haihonghong
目录
相关文章
云边散步
|
7月前
|
前端开发 容器
css知识学习系列（2）-每天10个知识点
css知识学习系列（2）-每天10个知识点
云边散步
39 0
云边散步
|
7月前
|
前端开发 BI UED
css知识学习系列（1）-每天10个知识点
css知识学习系列（1）-每天10个知识点
云边散步
48 0
刻刻帝的海角
|
17天前
|
Web App开发 编解码 前端开发
CSS知识点
CSS知识点
刻刻帝的海角
12 0
_长银_
|
2月前
|
前端开发
CSS position 小结
CSS position 小结
_长银_
14 0
进步`于辰
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
进步`于辰
45 0
[HTML、CSS]知识点
云边散步
|
7月前
|
前端开发 JavaScript 容器
css知识学习系列（3）-每天10个知识点
css知识学习系列（3）-每天10个知识点
云边散步
36 0
云边散步
|
7月前
|
前端开发 容器
css知识学习系列（15）-每天10个知识点
css知识学习系列（15）-每天10个知识点
云边散步
43 0
云边散步
|
7月前
|
前端开发 容器
css知识学习系列（14）-每天10个知识点
css知识学习系列（14）-每天10个知识点
云边散步
38 0
云边散步
|
7月前
|
前端开发 JavaScript 容器
css知识学习系列（11）-每天10个知识点
css知识学习系列（11）-每天10个知识点
云边散步
27 0
coleak
|
8月前
|
前端开发
css入门知识点复习总结
css入门知识点复习总结
coleak
32 0