CSS中的position | 豆包MarsCode AI刷题

不是鱼
165 阅读5分钟

前言

在css中，有一个position属性，它决定了页面中元素定位的方式以及是否脱离文档流，而文档流也是我们理解position属性的基础与关键

文档流

文档流作为页面布局的基础之一，是指页面中元素的默认布局方式。在文档流中，块级元素会在页面中垂直从上而下排列，每一个块级元素会占据新的一整行；行内元素在页面中水平从左向右排列，直到遇到块级元素或行宽不足以容纳更多行内元素时才会换行。

position

positon属性有5个值，分别是：static(静态定位)，relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和sticky(粘性定位)。接下来我们分别来了解这5种定位的具体用法和区别

static(静态定位)

static是position默认属性，如果当一个元素的position属性未被显示设置也就是没有在css样式中给出时，浏览器会将其视为static

image.png

这边我们给这两个块级元素设置了宽和高，他们各自占据了一整行，加上了不同颜色边框用来区分

relative(相对定位)

相对定位的对象是元素自身所处的位置，我们给div1的position加上relative值

image.png

这时我们刷新页面发现元素的位置并未发生变化，这是因为你没有给他的position赋上具体的偏移方向以及值，我们的position拥有top right bottom left四个属性，当我们给他加上top和left之后

.one{
    width: 100px;
    height: 50px;
    border:5px solid rgb(252, 104, 104);
    margin: 10px;
    position: relative;
    top: 10px;
    left: 10px;
}

image.png

有没有感到疑惑，我们明明是添加的top和left，它为什么反而相对于原位置向right和bottom方向移动了呢？ 这是因为这里的top right bottom left并不像字面上理解的上下左右一样，这里的top是设置元素相对于其定位上下文（在这里也就是元素原本的位置）的顶部的距离，同理right bottom left则是相对于其定位上下文的右 底 左 的距离，这样一说有没有豁然开朗的感觉呢。

absolute(绝对定位)

绝对定位会使元素脱离文档流，脱离文档流的意思就是元素不再属于页面中正常布局的一员，其他元素会如同它不存在一样进行布局，我们此时给div2添加上absolute,并把div1的relative去除

.two{
    width: 100px;
    height: 50px;
    border: 5px solid rgb(104, 141, 252);
    margin: 10px;
    position: absolute;
}

image.png

可能变化不是很明显，但是与第一张图对比我们可以发现，div1与div2盒子的距离变长了，这是因为div2已经脱离了文档流，而在正常的文档流中，块级元素的margin(外边距)会发生重叠，取两者中最大的外边距作为他们元素间的距离，而在脱离文档流后，margin将不在重叠，所以他们之间的间距变宽了，但这只是其一。

image.png

在设置absolute后，元素会相对于其最近(由内而外)的祖先元素(position值不为static的元素)进行定位，如果找不到这样的祖先元素，则它会对进行定位。下面我们将其嵌套进div1中，并为div1加上relative属性

<div class="one">div1
    <div class="two">div2</div>
</div>

image.png

在这里我们好像还是没有清楚的看出绝对定位所产生的效果，好像它就是乱定位了一样，这是因为绝对定位中是元素相对于元素的内容(concent)左上角产生的定位，如果元素包含margin border和padding的话就会产生这样的效果，这里我们将div2的这些属性全部删除，并给其加上蓝色背景后再给div1加上内边距

.one{
    width: 100px;
    height: 50px;
    border:5px solid rgb(252, 104, 104);
    margin: 10px;
    position: relative;
    padding: 20px;

}
.two{
    width: 100px;
    height: 50px;
    position: absolute;
    background-color: blue;
}

image.png

我们就会发现他们的内容紧贴在了一起，这是我们没有给出top left right bottom属性的样式，当我们给他加上top和left之后

.two{
    width: 100px;
    height: 50px;
    position: absolute;
    background-color: rgb(155, 155, 243);
    top:1px;
    left: 1px;
}

image.png

它就会相对于定位元素的padding+concent进行定位，并不会包含border。

fixed(固定定位)

类似于绝对定位，也会使元素脱离文档流，但元素是相对于浏览器窗口定位，而不是任何祖先元素：

.two{
    width: 100px;
    height: 50px;
    position: fixed;
    background-color: rgb(155, 155, 243);
    top:10px;
    left: 10px;
}

image.png

sticky(粘性定位)

position: sticky 是一种特殊的定位方式，它结合了 position: relative 和 position: fixed 的特性。元素在滚动到特定位置之前表现为相对定位，一旦达到指定的位置，就会变为固定定位，元素将始终位于文档流中。

<div class="container">
    <div id="sticky-box">
      我是一个粘性定位的元素
    </div>
    <div class="content">
      这里是一些内容...
    </div>
</div>

.container {
    height: 1000px; /* 模拟长内容 */
  }
#sticky-box {
    position: sticky;
    top: 10px;
    background-color: lightgreen;
    padding: 10px;
  }
.content {
    height: 800px; /* 模拟长内容 */
}

image.png

当向下滑动后：

image.png

小结

position是css中必须掌握且极为重要的技巧，不论在实战中还是面试中都会遇到，通过理解和运用这些定位方式，可以灵活地控制页面中元素的位置和布局，实现复杂的页面设计效果。

avatar
文章
阅读
粉丝