position有哪些属性?

PromptOnce

于 2024-06-13 08:45:25 发布

阅读量534

点赞数 19

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_45596561/article/details/139641151

版权

`position` 属性概述

position 属性用于指定一个元素在文档中的定位方式。主要有五种属性值：static、relative、absolute、fixed 和 sticky。

1. `static`

默认值：所有元素的默认定位方式。
特性：元素按照正常的文档流排列，不受 top、right、bottom、left 等定位属性影响。

<p style="position: static;">This is a static positioned element.</p>

2. `relative`

特性：元素仍然处于正常文档流中，但可以使用 top、right、bottom、left 属性进行偏移，偏移相对于其正常位置。

<div style="position: relative; top: 10px; left: 20px;">
    This is a relatively positioned element.
</div>

示例解释：这个元素将从它在文档流中的正常位置向下偏移10像素，向右偏移20像素。

3. `absolute`

特性：元素脱离文档流，相对于最近的已定位（relative、absolute 或 fixed）的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是文档的根元素）进行定位。

<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 20px;">
        This is an absolutely positioned element.
    </div>
</div>

示例解释：内层的 div 将相对于外层的 div（最近的已定位祖先元素）进行定位，向下偏移10像素，向右偏移20像素。

4. `fixed`

特性：元素脱离文档流，相对于浏览器窗口进行定位，无论页面滚动如何变化，元素始终保持在指定位置。

<div style="position: fixed; top: 10px; right: 20px;">
    This is a fixed positioned element.
</div>

示例解释：这个元素将始终固定在浏览器窗口的右上角，距离顶部10像素，距离右侧20像素，即使页面滚动也不会改变。

5. `sticky`

特性：元素在正常文档流中，基于用户的滚动位置进行定位。在超过指定的阈值（通过 top、right、bottom 或 left 属性设置）之前表现为相对定位，超过阈值后表现为固定定位。

<div style="position: sticky; top: 0;">
    This is a sticky positioned element.
</div>

示例解释：这个元素在页面滚动时会“粘”在视口的顶部，当其到达视口顶部时保持固定不动，直到其包含块超出视口。

使用场景总结

static：默认值，一般不需要特别指定，除非需要覆盖其他指定的 position 值。
relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。
absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。
fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。
sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。

例子

1. 绝对定位和相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position Example</title>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        .absolute-box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="absolute-box">Absolute</div>
    </div>
</body>
</html>

2. 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position Fixed Example</title>
    <style>
        .fixed-box {
            position: fixed;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-color: coral;
        }
        .content {
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="fixed-box">Fixed</div>
    <div class="content">Scroll down to see the fixed element.</div>
</body>
</html>

通过以上讲解，你应该能够理解和应用 position 属性的不同值，并知道在实际开发中如何使用它们来实现不同的布局效果。

1. 只知道absolute和relative。

static：默认值，一般不需要特别指定，除非需要覆盖其他指定的 position 值。
relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。
absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。
fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。
sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。

3. /

static：默认值，一般不需要特别指定，除非需要覆盖其他指定的 position 值。
relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。
absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。
fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。
sticky：在需要元素在滚动时固定但仍受文档流影响时使用，如滚动表头。

PromptOnce

关注

19
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
position有哪些属性?

position属性用于指定一个元素在文档中的定位方式。staticrelativeabsolutefixed和sticky。static：默认值，一般不需要特别指定，除非需要覆盖其他指定的position值。relative：在需要对元素进行轻微调整且保持其在文档流中的位置时使用。absolute：在需要将元素精确定位并从文档流中移除时使用，如弹出框、悬浮菜单等。fixed：在需要元素固定在视口特定位置时使用，如固定导航栏、侧边栏等。sticky。
复制链接

扫一扫