前端必知：14.定位元素的认识及使用

最新推荐文章于 2024-07-17 14:24:38 发布

小姚学前端

最新推荐文章于 2024-07-17 14:24:38 发布

阅读量681

点赞数 2

分类专栏： HTHL+CSS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52799985/article/details/131756211

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一，引言

定位是前端开发中一项重要的布局技术，用于控制元素在页面上的位置。常见的定位方式有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。下面是关于定位元素的基本认识和使用的一些要点：

相对定位（relative）：
- 相对定位是相对于元素在正常文档流中的初始位置进行定位。元素的相对位置是保留的，其他元素不会受到影响。
- 使用相对定位可以通过设置 top、right、bottom、left 属性来控制元素的偏移位置。
绝对定位（absolute）：
- 绝对定位是相对于最近的已定位（设置了定位属性，如 relative、absolute、fixed 或 sticky）的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是窗口）进行定位。
- 使用绝对定位需要设置 top、right、bottom、left 属性来控制元素的位置。
- 绝对定位会从文档流中脱离，不会占据原有位置，因此下面的元素会上移填充空白。
固定定位（fixed）：
- 固定定位是相对于视口（浏览器窗口）进行定位，始终保持在页面上的固定位置，不会随滚动而移动。
- 使用固定定位需要设置 top、right、bottom、left 属性来控制元素的位置。
- 固定定位的元素不会影响其他元素的布局。
粘性定位（sticky）：
- 粘性定位是相对定位和固定定位的结合，在特定的位置设置粘性定位后，元素会在滚动到指定阈值前保持相对定位，当滚动超过阈值时，元素会变为固定定位。
- 使用粘性定位需要设置 top、right、bottom、left 属性来控制元素的起始位置，以及设置 position: sticky 属性。

总结起来，定位元素可以通过设置位置属性（top、right、bottom、left）来控制其在页面上的具体位置。相对定位相对于元素初始位置进行定位，绝对定位和固定定位相对于祖先元素或视口进行定位，而粘性定位是一种特殊的相对和固定定位的组合。这些定位方式可以帮助实现灵活的布局效果，但也需要注意其影响范围以及与其他布局属性的交互作用。在使用定位时，建议根据具体需求选择合适的定位方式，并进行必要的调整与配合，以达到预期的布局效果。

定位的元素超出文档流

二，什么时候需要使用定位

在同一块文档流的区域内同时叠放多个标签

定位的流程：

1.通过 position 属性设置定位参照物

2.通过方位属性，设置具体方位定位参照物，方位属性 top

left right bottom 他是用来设置距离参照物有多远。

他们的优先级是left>right

top>bottom

position 属性的值

static relative absolute fixed

static：静态定位，无参照物，不定位

relative：相对定位，以元素本身没有移动之前的位置为参照物

absolute：绝对定位，以当前元素的第一个具有定位属性的

祖先级元素为参照物，作为参照物的祖先及元素必须具有

position: relative 或者position: absolute;

如果没有定位的祖先级属性，则参照物是 body

fixed:固定定位,参照物是相对于浏览器窗口定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认识定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            background-color: #04be02;
            /* 相对定位 */
            /* position: relative; */
            /* 绝对定位 */
            position: absolute;
            left: 100px;
            top: 100px;  
        }
        .normal{
            width: 200px;
            height: 200px;
            background: #f00;
        }
        .fu{
            width: 400px;
            height: 400px;
            margin: 200px auto;
            background-color: #f00;
            position: relative; 
            left: 200px;
            border: 1px #04be02 solid;
        }
        .zi{
            width: 200px;
            height: 200px;
            background-color: #ff0;
            margin: 100px auto;
            position: relative;
            /* position: absolute;
            left: 10px;
            top: 10px; 
            position: absolute; */
        }
        .sun{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .go-top{
            width: 100px;
            height: 100px;
            border: 1px #f00 solid;
            position: fixed;
            right: 100px;
            left: 100px;
            bottom: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <!-- 
        定位的元素超出文档流

        什么时候需要使用定位
        在同一块文档流的区域内同时叠放多个标签
        
        定位的流程：
        1.通过 position 属性设置定位参照物
        2.通过 方位 属性， 设置具体方位定位参照物，方位属性 top
        left right bottom 他是用来设置距离参照物有多远。
        他们的优先级是left>right
                      top>bottom
        position 属性的值
          static relative absolute fixed 
        
        static：静态定位，无参照物，不定位
        relative：相对定位，以元素本身没有移动之前的位置为参照物
        absolute：绝对定位，以 当前元素的第一个具有定位属性的
        祖先级元素 为参照物，作为参照物的祖先及元素必须具有
             position: relative 或者position: absolute;
        如果没有定位的祖先级属性，则参照物是 body
        fixed:固定定位,参照物是相对于浏览器窗口定位

     -->
    <div class="wp"></div>
    <span >柳如是</span>
    <div class="normal">钱谦益</div>
    <div class="fu">
        <div class="zi">
            <div class="sun"></div>
        </div>
    </div>
    <a class="go-top" href="#">回到顶部</a>
</body>
</html>

相对定位的特点

1.相对定位是基于原来的位置进行定位

2.元素设置了相对定位以后，对元素本身没有任何影响

3.元素设置了相对定位以后虽然元素脱离文档流，但是元素本身的位置

依然占据文档流的空间

4.相对定位的元素，天然提升层级，比没有定位的元素层级高

5.相对定位的元素，可以通过left top bottom right 改变元素的位置

绝对定位的特点：

1，设置了绝对定位的元素会脱离文档流，不占据文档流空间并且提升层级

2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下padding和

上下margin，如果不设置宽高，宽高由内容撑开。

3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高

宽高由内容撑开

4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位

如果不存在这样祖先级元素，则相对于document（文档）定位。具有

定位属性的祖先级元素，一般需要有 relative和absolute其中一个定位元素

5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高

固定定位的特点

1.固定定位相对于浏览器窗口定位

2，固定定位脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的特点</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::after{
            content: '';
            display: block;
            overflow: hidden;
            height: 0;
            clear: both;
        }
        .wp{
            border: 1px #f00 solid;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: #04be02;
            float: left;
            border-radius: 50%;
        }
        .bar{
            height: 0;
            border-top: 1px #ccc solid;
            float: left;
            width: 100px;
            margin-top: 50px;
            position: relative;
        }
        .bar span{
            float: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px #ccc solid;
            position: absolute;
            left: 34px;
            top: -16px;
        }
        .tips{
            position: absolute;
            left: 200px;
            top: 200px;
            /* width: 200px;
            height: 200px; */
            background-color: #f00;
            margin: 30px;
            padding: 30px;
        }
        .promise{
            margin: 0 auto;
            background-color: #ff0;
            position: absolute;
            width: 200px;
            
        }
    </style>
</head>
<body>
    <!-- 
        相对定位的特点
        1.相对定位是基于原来的位置进行定位
        2.元素设置了相对定位以后，对元素本身没有任何影响
        3.元素设置了相对定位以后虽然元素脱离文档流，但是元素本身的位置
        依然占据文档流的空间
        4.相对定位的元素，天然提升层级，比没有定位的元素层级高
        5.相对定位的元素，可以通过left top bottom right 改变元素的位置

        绝对定位的特点：
        1，设置了绝对定位的元素会脱离文档流，不占据文档流空间并且提升层级
        2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下padding和
        上下margin，如果不设置宽高，宽高由内容撑开。
        3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高
        宽高由内容撑开
        4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位
        如果不存在这样祖先级元素，则相对于document（文档）定位。具有
        定位属性的祖先级元素，一般需要有 relative和absolute其中一个定位元素
        5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高

        固定定位的特点
        1.固定定位相对于浏览器窗口定位
        2，固定定位脱离文档流

     -->
    <div class="wp clearfix">
        <div class="c"></div>
        <div class="bar">
            <span></span>
        </div>
        <div class="c"></div>
    </div>
    <span class="tips">人有多大胆，地有多大产</span>
    <div class="promise">一定能把作业完成</div>
</body>
</html>

小姚学前端

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端必知：14.定位元素的认识及使用

相对定位相对于元素初始位置进行定位，绝对定位和固定定位相对于祖先元素或视口进行定位，而粘性定位是一种特殊的相对和固定定位的组合。在使用定位时，建议根据具体需求选择合适的定位方式，并进行必要的调整与配合，以达到预期的布局效果。常见的定位方式有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位。4.相对定位的元素，天然提升层级，比没有定位的元素层级高。
复制链接

扫一扫