一文带你了解CSS中的定位—续集

最新推荐文章于 2024-08-24 13:47:49 发布

诺坎普的风间

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量403

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 html css定位定位

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129795245

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

本文介绍了CSS中的定位概念，包括固定定位的特性，如何实现元素在版心右侧的固定位置，黏性定位的混合特性，以及相对、绝对和固定定位的总结。此外，还讨论了定位叠放次序和z-index的使用，以及绝对定位的居中技巧和定位对元素尺寸的影响。

摘要由CSDN通过智能技术生成

🌟 所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的定位相关知识。知识学习内容来自b站的 @黑马程序员 的视频

😃1 固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：浏览器页面滚动时元素的位置不会改变。

特点

以浏览器的可视窗口为参照点移动元素
与父元素没有任何关系
不随滚动条滚动
固定定位不再占有原先的位置

😃2 固定定位在版心右侧位置

left值为50%，然后margin-left值为版心宽度的一半

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banxin {
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
        }

        .fixed {
            position: fixed;
            left: 50%;
            top: 0;
            margin-left: 650px;
            background-color: aqua;
            width: 50px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="banxin">
    </div>
    <div class="fixed"></div>

</body>

</html>

😃3 黏性定位（了解）

黏性定位可以被认为是相对定位与固定定位的混合

特点

以浏览器的可视窗口为参照点移动元素（固定定位特点）
黏性定位占有原先的位置（相对定位特定）
必须添加其中top、bottom、right、lefft一个值才有效

跟页面滚动搭配使用，兼容性较差，IE不支持

😃4 定位总结

定位模式	是否脱标	移动位置	是否常用
statci静态定位	不脱标	不能使用边偏移	少
relative相对定位	不脱标（占有位置）	相对于自身位置偏移	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占用位置）	浏览器可视区	常用
sticky黏性定位	不脱标（占用位置）	浏览器可视区	当前阶段少

😃5 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况，可以用z-index来控制盒子的前后顺序

数值可以是正负和0，数值越大盒子越靠上
如果属性值相同，按照书写顺序，最后面的越靠上
数字后面不可以加单位
只有定位的盒子才有z-index属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .b {
            width: 200px;
            height: 200px;
            background-color: green;
            z-index: 3;
        }

        .c {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box a"></div>
    <div class="box b"></div>
    <div class="box c"></div>
</body>

</html>

如上图，绿色等级最高了

😃6 定位的拓展

🔥绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下的计算方式实现。

让left值为50%，然后margin-left取自身宽度一半的负值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

🔥定位的特性

绝对定位和固定定位和浮动类似

行内元素添加绝对或者固定定位，可以直接设置宽度和高度
块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小

🔥定位的拓展

绝对定位（固定定位）会完全压住盒子的所有内容，但是浮动元素只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字或图片

诺坎普的风间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一文带你了解CSS中的定位—续集

定位模式是否脱标移动位置是否常用statci静态定位不脱标不能使用边偏移少relative相对定位不脱标（占有位置）相对于自身位置偏移常用absolute绝对定位是（不占有位置）带有定位的父级常用fixed固定定位是（不占用位置）浏览器可视区常用sticky黏性定位不脱标（占用位置）浏览器可视区当前阶段少。
复制链接

扫一扫