css定位五种方式（代码，图片）详解

最新推荐文章于 2024-04-19 09:39:59 发布
最新推荐文章于 2024-04-19 09:39:59 发布
阅读量1.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： css css3 javascript 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Czyqyf/article/details/132415344
本文详细介绍了CSSposition属性的五种定位方式：static、fixed、relative、absolute和sticky，阐述了它们的工作原理、示例和在布局中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

定位 position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根 据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

实例：

<style>
        .div1 {
            width: 400px;
            height: 50px;
            position: static;
            top: 100px;
            left: 200px;
            background-color: aqua;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="div1">使用position: static进行定位</div>
</body>

效果：

如下图显示当我们使用静态定位时，是根据文档流进行排列。在添加 top、left等方位时是不会出现效果。

我们在打开开发人员工具也可以看到箭头标识上显示没有生效的提示。

在这里插入图片描述

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

实例：

<style>
        /* 静态定位 */
        .div1 {
            width: 400px;
            height: 50px;
            position: static;
            top: 100px;
            left: 200px;
            background-color: aqua;
            border: 2px solid red;
        }

        /* 视口定位 */
        .div2 {
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="div1">使用position: static进行定位</div>
    <div class="div2">使用使用position: static进行定位</div>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>
    <h1>1644</h1>

在这里插入图片描述

效果：

因为当前元素无法撑开页面，在里面插入h1标签撑开窗口。如下图一显示，观察当在浏览器最顶部时视口定位的粉色盒子的位置。当我们进行滚动窗口时内容会发生改变，但是粉色盒子不会受到影响

第二张图片：

在这里插入图片描述

position: relative;

相对定位position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素 留下的任何空间。

代码：

style>
        /* 静态定位 */
        .div1 {
            width: 400px;
            height: 50px;
            position: static;
            top: 100px;
            left: 200px;
            background-color: aqua;
            border: 2px solid red;
        }

        /* 视口定位 */
        .div2 {
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        /* 相对定位 */
        .div3,
        .div4 {
            position: relative;
            height: 100px;
            border: 2px solid blue;
        }

        .div3 {
            top: -20px;
            left: 10px;
        }
    </style>
</head>

<body>
    <div class="div1">使用position: static进行定位</div>
    <div class="div2">使用position: static进行定位</div>
    <div class="div3">使用position: relative;进行定位</div>
    <div class="div4">测试</div>


</body>

效果：相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动
在这里插入图片描述

position: absolute;

绝对定位是元素以带有定位的父级元素来移动位置

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（body）。

  3. 父元素要有定位
    将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

    绝对定位的特点：

    • 绝对是以带有定位的父级元素来移动位置 如果父级都没有定位，则以浏览器文档为准移动位置
    • 不保留原来的位置，完全是脱标的。

    定位口诀 —— 子绝父相

​ 子绝父相 —— 子级是绝对定位，父级要用相对定位。

代码：

<style>
        /* 静态定位 */
        .div1 {
            width: 400px;
            height: 50px;
            position: static;
            top: 100px;
            left: 200px;
            background-color: aqua;
            border: 2px solid red;
        }

        /* 视口定位 */
        .div2 {
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        /* 相对定位 */
        /* .div3,
        .div4 {
            position: relative;
            height: 100px;
            border: 2px solid blue;
        }

        .div3 {
            top: -20px;
            left: 10px;
        } */
        /* 父元素相对定位 */
        .div5 {
            position: relative;
            height: 400px;
            background-color: pink;
        }

        /* 子元素绝对定位 */
        .div6 {
            position: absolute;
            width: 400px;
            height: 200px;
            top: 100px;
            left: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="div1">使用position: static进行定位</div>
    <div class="div2">使用position: static进行定位</div>
    <!-- <div class="div3">使用position: relative;进行定位</div> -->
    <!-- <div class="div4">测试</div> -->
    <div class="div5">父元素相对定位
        <div class="div6">子元素绝对定位</div>
    </div>

</body>

效果：

在这里插入图片描述

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为 止，然后将其“粘贴”在适当的位置。

代码：

<style>
        /* 静态定位 */
        .div1 {
            width: 400px;
            height: 50px;
            position: static;
            top: 100px;
            left: 200px;
            background-color: aqua;
            border: 2px solid red;
        }

        /* 视口定位 */
        .div2 {
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        /* 相对定位 */
        /* .div3,
        .div4 {
            position: relative;
            height: 100px;
            border: 2px solid blue;
        }

        .div3 {
            top: -20px;
            left: 10px;
        } */
        /* 父元素相对定位 */
        .div5 {
            position: relative;
            height: 400px;
            background-color: pink;
        }

        /* 子元素绝对定位 */
        .div6 {
            position: absolute;
            width: 400px;
            height: 200px;
            top: 100px;
            left: 300px;
            background-color: red;
        }

        .div7 {
            position: -webkit-sticky;
            position: sticky;
            height: 100px;
            top: 50px;
            background-color: green;

        }
    </style>
</head>

<body>
    <div class="div1">使用position: static进行定位</div>
    <div class="div2">使用position: static进行定位</div>
    <!-- <div class="div3">使用position: relative;进行定位</div> -->
    <!-- <div class="div4">测试</div> -->
    <div class="div5">父元素相对定位
        <div class="div6">子元素绝对定位</div>
    </div>
    <div class="div7">粘性定位</div>

在这里插入图片描述

当图片达到设定top时会从静态定位转为固定定位，如下图显示
在这里插入图片描述

Czyqyf
关注
css图片定位
05-01
css图片定位工具 很好用的 做html时把图片整合定位的好工具
CSS属性之定位属性（图文详解）
12-01
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍...
css背景图片定位
01-02 295
背景图默认平铺： background-repeat: no-repeat;/*不平铺*/ /*repeat-x;沿X轴平铺*/ /*repeat-x;沿Y轴平铺*/ 背景图片定位： background-position: 100px 30px;...
CSS常用背景图片定位方法
weixin_30535565的博客
10-08 747
CSS背景图片定位其实对于每一位学习前端的同学来说，都已经非常熟悉了。网上铺天盖地的最常见的一种方案就是在父元素中relative，然后子元素absolute。这种方案当然好，不过带来的一个缺点就是会改变元素的层级关系，如果在多个地方使用，这样的层叠嵌套的关系会十分混乱。 先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。 整篇文章会按照如下思路： 1.无依赖的abso...
CSS定位
weixin_43708913的博客
03-19 1179
CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制：普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。
css教程之绝对定位使用详解
12-13
如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
div+css详解定位与定位应用
10-30
#### 二、CSS定位概述 在CSS中，有四种主要的定位类型：`static`、`relative`、`absolute` 和 `fixed`。它们分别对应着不同的定位行为和应用场景。 ##### 1. Static定位 - **定义**：这是元素的默认定位方式，元素...
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
12-09
如果你对CSS定位还不够了解 可以接着往下看，运行里面的内容即可。【需求】： 将一个网页分成头、身和脚三部分。如下： ———————————————————— 头 ———————————————————— 身 ...
CSS 定位
小白向前冲！
02-01 598
【1】 ——html中3种布局方式：    （1）标准流（顺序布局）： 元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。    （2）浮动 float ：    （3）定位 position ： 可选参数有 static 、absolute  、 relative 、 fixed 、 inherit     
CSS 背景图片定位
炉火纯青
02-23 1736
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，比如： 　　又如： 　　查看原图（大图） 　　这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。
css 如何设置背景图片定位
最新发布
ivan5277的博客
04-19 4571
在CSS中设置背景图片的位置，可以使用属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值，包括关键字、长度单位（像素、百分比等）以及组合值。
CSS学习（二）：背景图片如何定位？
weixin_34104341的博客
07-11 404
我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程中，我常混淆，经常切不到自己想要的效果，于是决定好好理解其工作机制，这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位...
搞清CSS样式中background-position（背景图片定位）
阿衡·加油！
11-13 2381
昨天看一个网页的时候，看到一句:background: url(images/top2.jpg) no-repeat 50% 9px; 其中50%代表的意义等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分隐藏下面是在网上找的一篇详细介绍background-position（背景图片定位）的文章。 1. background-position:lef
css定位
w1258048309的博客
08-22 147
绝对定位与相对定位 通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效。还有z-index属性在这时也不会生效。 相对定位 relative： 首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了
CSS定位详解：从静态到绝对，全面掌握五种定位方式
CSS定位是网页布局中的关键概念，它允许开发人员精确控制元素在页面中的位置，即使在复杂的布局中也能保持灵活性。定位有五个主要的定位模式：静态定位（static）、绝对定位（absolute）、相对定位（relative）、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值