李涛自留地
回到顶部
首页 > 前端 > position是什么意思？position在Css中怎么用？

position是什么意思？position在Css中怎么用？

文章目录

position是什么意思？position:absolute什么意思？position在Css中怎么使用？position在Css3中起到页面某一元素定位的作用，当我们需要将某一个元素定位到另外一个元素的某一个位置的之后我们就要用到position。那么在Css3中怎么使用position呢？

position属性类型

position在Css3中可以设置成不同的属性值，已此来达到定位的效果，以下是笔者整理的position属性类型表格：

属性类型 作用 定位元素
relative 绝对定位
absolute 相对定位 left(左),top(上),right(右),以及bottom(下)
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，固定定位。 left(左),top(上),right(右),以及bottom(下)
static 默认值。没有定位。
inherit 规定应该从父元素继承 position 属性的值。

以下文章主要记载和介绍position:absolute、position:relative、position:fixed的使用方法。

position:absolute如何使用

比如我想让一个某一篇文章标题定位到这篇文章缩略图最底部，意思就是让文章标题在缩略图最底部显示出来，如何来做呢？这是在网站前端开发中常用的场景之一，这里就需要用到position中的绝对定位和相对定位。

在《Html5新元素figure标签如何使用？Html5新元素figure标签用法实例》一文中，我就使用了position绝对定位和相对定位，把figcaption标签定位到了图片底部。再次拿出上次写的一个demo:

<!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>Html5新标签新元素Figure用作图像方面的Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 14px;
            background-color: #f8f8f8;
            color: #333;
        }

        .content {
            margin: 0 auto;
        }

        .thumbnail {
            margin: 15px;
        }

        .thumbnail figure {
            position: relative;
            display: flex;
            flex-flow: column;
            max-width: 320px;
            margin: auto;
            padding: 3px;
            border: 1px dashed #000;
        }

        .thumbnail figure img {
            max-width: 320px;
        }

        .thumbnail figure figcaption {
            position: absolute;
            left: 0;
            bottom: 3px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <main class="content">
        <section class="thumbnail">
            <figure>
                <img src="ss06.jpg" alt="好看的雪山图片" title="好看的雪山图片">
                <figcaption>好看的雪山图片</figcaption>
            </figure>
        </section>
    </main>
</body>

</html>

以上面代码为例，需要将figcaption标签内图片的说明文字定位到图片底部，那么figcaption就需要用相对定位，而它的父级元素figure就需要使用绝对定位，然后再使用left、bottom（top、right）设置相对应的像素直到figcaption标签内的图片说明文字能刚好高于图片底部。

position是什么意思？position在Css中怎么用？

position:absolute使用要点

1、position:absolute在子级元素中，通过top、left、right、bottom来设置相对定位的位置，他们的单位可以是px，也可以是百分比。

2、position:absolute必须在其父级元素中定义position:relative，才能达到以上实例中的效果，如果父级元素不设置position:relative，那么定位就无效。

position:fixed如何使用

其实笔者的博客header部分导航栏就使用了position:fixed，对导航栏进行了固定定位，还有在《jQuery回到顶部实例代码 jQuery怎么实现回到顶部》一文中对回到顶部小图标也使用了position:fixed对回到顶部小图标进行了固定定位。这个固定定位就是相对于浏览器进行了定位，当某一元素使用position:fixed后，当鼠标下滑时这个元素就会跟随下滑移动，确定定位的位置也是使用top、left、right、bottom来设置。

以上就是对position是什么意思？position在Css中怎么使用？position作用的记载和介绍，最开始学习前段时对相对定位和绝对定位也有点懵逼，后来理解过来了，其实还是比较简单的知识点。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。