css定位(position)

已于 2022-07-12 22:00:52 修改
阅读量644 收藏 2
点赞数
文章标签： css css3 html
于 2022-06-10 19:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56745273/article/details/125223018
版权

文章目录

css定位(position)

css定位是用来指定元素在文档中的定位方式。不决定元素在文档中的最后位置
position
从图中可以看出，css中的position属性目前市面上的大多数浏览器全都支持。

position属性值

position的属性值目前MDN官方文档上是五个，我在写这篇文章之前只知道四个，第五种也是刚学，
如果有一些错误的地方，敬请指正

position属性值有五个，分别是：

position:static

静态定位

这是一个关键字，元素设置了这个属性，就表示他是正常的布局方式，如果再设置了top、 bottom、left、right、z-index等属性，那么这些属性就不会起作用,失效了
接下来看一个例子，首先是正常布局，加上了top，left等属性：

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
            position: relative;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行截图如下：
static
这是没有给div增加position：static属性的样子。可以看出来，红色的div设置的top，left，属性，都能起效果，接下来，我把static属性，给div加上，那么会发生什么呢？

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
            position: relative;
            top: 20px;
            left: 20px;
            position: static;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行结果如下：
static
这样从运行的结果上可以看出，红色div设置的top，left属性并没有起效果。

说到这，可能有一些初学者就会发现，我还在div的css样式加上了position: relative;我就先卖个关子，这个属性我会在下面讲解。

其实这个position: static;属性，我本人可能太菜了，我并没有在实际场景中用过，其实我把div中的两个position属性都去掉，这个div的top，left，也是一样不起效果的：

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行结果如下：
没有position

可能有一些初学者又有疑惑了，这是怎么回事呢？
其实这很简单，这只是因为div在文档常规流中，所以给他设置top，left等属性不起效果。

position:relative

相对定位

相对定位不脱离文档流，它是相对于自己原来的位置进行移动，结合着top，left等属性进行一定量的偏移。

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
        }
        
        div:nth-of-type(2) {
            position: relative;
            left: 100px;
            top: 20px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

运行结果如下：
relative
从运行结果上可以看出，我给第二个div设置了position：relative属性，第二个div是相对于自己的原来位置进行偏移的。一般相对定位用来微调元素的位置。

position：absolute

绝对定位

元素设置这个属性，就会脱离正常的文档流，要想进行偏移移动，要给元素一个参照物，一般是设置了position:relative属性的父元素、或者是最近的非 static 定位祖先元素。

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
        }
        
        div:nth-of-type(3) {
            background-color: brown;
        }
        
        div:nth-of-type(3) .container {
            left: 100px;
            top: 20px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div>
        <div class="container"></div>
    </div>
</body>

</html>

运行结果如下：
position：absolute
从效果图中可以看出，没有设置绝对定位，蓝色的div在正常的文档流中正常显示。

蓝色外面的div明明也设置了颜色，为什么不显示呢，这是由于里面和外面的一样大小，所以盖住了。
设置大一点
这就可以解释了，我给外面的div设置了大一下，所以就显示出来。

好了，继续回归绝对定位。现在我给外面的div设置相对定位，给里面的div设置绝对定位，我们一起来看结果：

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
        }
        
        div:nth-of-type(3) {
            background-color: brown;
            position: relative;
        }
        
        div:nth-of-type(3) .container {
            position: absolute;
            left: 100px;
            top: 20px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div>
        <div class="container"></div>
    </div>
</body>

</html>

运行结果如下：
绝对定位
从运行的结果我们可以看出来，设置了绝对定位的元素只要它的父元素设置了相对定位，那么设置了绝对定位的元素就会相对于设置相对定位的元素进行相对的一些偏移

position:fixed

固定定位

固定定位，自然是脱离正常的文档流的，设置固定定位，那么元素就相当于是把浏览器的视口当作参照的，自然也就是相对于浏览器的视口进行定位的。

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            width: 100%;
            height: 2000px;
        }
        
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            background-color: red;
        }
        
        div:nth-of-type(3) {
            background-color: brown;
        }
        
        div:nth-of-type(3) .container {
            position: fixed;
            left: 100px;
            top: 100px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div>
        <div class="container"></div>
    </div>
</body>

</html>

运行结果如下：
固定定位
从图中可以看出，设置了固定定位的元素是相对于浏览器进行定位的，跟它的父元素没有关系
固定定位
无论浏览者怎么滚动浏览器的视口，设置了固定定位的元素都不会改变。

position：sticky

粘性定位

这是css3中新出的一个定位属性：

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。这是MDN官方文档的解释

我解释一下，通俗的说，这个粘性定位可以说是相对定位和固定定位的组合，把他们两个定位属性合二为一了。
通过一个小例子来解释一下：

<!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>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 2000px;
        }
        
        div:nth-of-type(1) {
            width: 100px;
            height: 50px;
            background-color: cadetblue;
        }
        
        div:nth-of-type(2) {
            position: sticky;
            width: 50px;
            height: 50px;
            margin-left: 20px;
            margin-top: 20px;
            top: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

运行结果如下：
粘性定位
现在距离浏览器的顶部是50px，接下来，我滚动浏览器的窗口，把距离缩小一点：
粘性定位
可以看到，只要往下移动，那么它就是固定定位了，需要注意几个点

  1. 需要指定 top、right、bottom 或 left 四个值其中之一，才可以使粘性定位起效果。否则它的作用就与相对定位相同。并且 top 和 bottom 同时设置时，top 起效果的优先级高；left 和 right 同时设置时，left 起效果的优先级高。
  2. 父元素的高度不能低于 设置了sticky的元素的高度，否则就失效。
  3. 如果父元素没有设置定位，那么就相对于浏览器的视口进行定位，否则就以设置了定位的父元素为参考点。

小菜鸡一枚。
若有错误，请在评论区中指正批评

前端志茗
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS定位概要
weixin_46513985的博客
06-23 270
CSS定位概要
深究CSS定位position的常用技法
09-27
在CSS中，定位是控制页面元素布局的关键技术之一。...在不断的学习和实践中，各位开发者应当能够更加熟练地运用CSS定位属性，以及理解定位带来的布局改变，从而更加高效地解决实际工作中遇到的各种布局挑战。
CSS position详解
前端小白
08-26 1955
1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。 2.接下来，要说明的是，可以设置块的大小。 3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。         A.static：这个值表示默认，让浏览器按照没有positio
css 固定位置
最新发布
qq_33240556的博客
07-13 286
意旨让一个元素在浏览器窗口中保持固定的位置，不论用户如何滚动页面，该元素的位置都不会发生改变。利用JavaScript监听滚动事件或其他特定事件，动态修改元素的CSS属性，比如在达到一定滚动位置时改变其定位方式或位置坐标。先在CSS中定义变量，然后通过JavaScript修改这些变量的值，从而改变元素的固定位置或其他相关样式。例如，当屏幕宽度小于某一阈值时，可以将固定定位的元素改为静态定位（属性，在元素从一种固定位置过渡到另一种固定位置时添加平滑的动画效果。虽然这不直接改变固定定位，但可以通过。
css定位
a63438840的博客
07-19 78
<1>static定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(run...
CSS Position(定位)
冷月醉雪的博客
05-21 208
    position 属性指定了元素的定位类型。     position 属性的五个值：    ·static    ·relative    ·fixed    ·absolute    ·sticky   static 定位    HTML元素的默认值，既没有定位，元素出现在正常的流中。    静态定位的元素不会受到top、bottom、left、right影响。 ...
css position（定位）
混子的博客
02-20 545
position 属性的五个值： static（默认） relative（相对定位） 移动相对定位元素，但它原本所占的空间不会改变。 fixed（固定定位） Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 absolute（绝对定位） absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 绝对...
简明CSS定位属性position
09-25
CSS定位属性position是设计和布局网页时一个极为重要的部分，它使得开发者能够精确控制页面元素的位置。position属性有四个主要的值：static、fixed、relative和absolute，每个值有其特定的用途和行为模式。 1. ...
css定位position引发的层级关系问题详解
01-21
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left...首先我们要知道，css属性其实是一个立体空间有x，y，z轴，但是只有我们使用了position定位时，z轴上的层级关系才体现出来，即z-in
全面剖析CSS Position定位
09-24
CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...
学习前端第八天
weixin_48680892的博客
11-11 103
position定位 position: 1. static(默认）：没有定位。 2.relative相对定位： 如果没有偏移量，对元素本身没有任何影响。 不是元素脱离文档流。 不影响其他元素布局。 做绝对定位的参考位。 left，right，top，bottom是相对于当前元素自身进行偏移的。 position：relative； left：100px； bottom:100px; 3.absolute绝对定位： 使元素脱离文档流。 找一个参考系，定义横纵坐标。默认是在
css定位position
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端志茗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值