Css中的定位概念及各定位方法笔记分享

最新推荐文章于 2023-04-10 11:30:50 发布

陈适时

最新推荐文章于 2023-04-10 11:30:50 发布

阅读量188

点赞数 1

分类专栏： css 前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_47966295/article/details/113758338

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）

本篇文章主要谈谈自己对于Css定位的理解

由于定位内容较多，本篇文章讲解概念，每个定位将拆分成单独一篇写

往期

子篇章

正文内容

定位的作用

个人理解为：有些布局例如浮动达不到的效果，定位可以很好地作为一个补充（常用于盒子的自由移动）

定位的方式

定位方式分为：静态定位（static）、绝对定位（absolute）、相对定位（relative）、固定定位（fixed）、粘性定位（sticky）

定位的偏移

定位偏移可以有（还有很多人称之为边偏移，这里是我个人理解为定位偏移）：top（距离顶部多远）、bottom（距离底部多远）、left（距离左边多远）、right（距离右边多远），这些偏移都是基于定位的方式来决定的，定位方式的不同会影响偏移的方向不同！

定位的实现

定位需要至少两行代码才能看得到效果：如position:relative; 和 top:10px;

首先定位需要确定定位方式，再确定定位偏移；如果只有定位没有偏移是无法实现效果的，反之也同理；

代码例子：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的实现</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: royalblue;
            /* 定位为相对定位 */
            position: relative;
            /* 定位偏移为100px */
            left: 100px;
        }
    </style>
</head>

<body>
    <div>定位的实现</div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

定位的实现

静态定位（static）

静态定位是position:static;网页默认的定位方式，即无定位；这种在实际开发中算是很少用的，如果设置为static则定位偏移不起效果

例子代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态定位</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            /* 定位为静态定位 */
            position: static;
            /* 定位偏移不起效果 */
            left: 100px;
        }
    </style>
</head>

<body>
    <div>静态定位</div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

静态定位

总结（各定位之间的比较）

定位方式	相对偏移位置	是否脱离标准流
静态定位	浏览器	否
相对定位	自身原来的位置	否
绝对定位	存在定位的祖先元素，若无则相对浏览器	是
固定定位	浏览器	是
粘性定位	浏览器	否

其他定位请阅读本文子篇章，开头附有链接！

陈适时

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Css中的定位概念及各定位方法笔记分享

Css中的定位概念及各定位方法笔记分享补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）本篇文章主要谈谈自己对于Css定位的理解由于定位内容较多，本篇文章讲解概念，每个定位将拆分成单独一篇写往期Vue简单入门Leangoo基本概念普及拆分篇章…文章目录Css中的定位概念及各定位方法笔记分享往期拆分篇章定位的作用定位的方式定位的偏移定位的实现静态定位（static）定位的作用个人理解为：有些布局例如浮动达不到的效果，定位可以很好地作为一个补充（常用于盒
复制链接

扫一扫