浅谈CSS中的Position(定位)

落日映苍穹つ 2022-12-19 08:50 146阅读 0赞

### 文章目录 ###

*   *  一、position的属性值
     *  二、static 定位
     *  三、fixed 定位
     *  四、relative 定位
     *  五、absolute 定位
     *  六、sticky 定位
     *  七、重叠的元素

## 一、position的属性值 ##

`position`属性指定了元素的定位类型。

**属性值：**

*  static
 *  relative
 *  fixed
 *  absolute
 *  sticky

> 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

## 二、static 定位 ##

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

## 三、fixed 定位 ##

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

> Fixed定位使元素的位置与文档流无关，因此不占据空间。  
> Fixed定位的元素和其他元素重叠。

**注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。**

## 四、relative 定位 ##

相对定位元素的定位是相对其正常位置。

> 移动相对定位元素，但它原本所占的空间不会改变。  
> 相对定位元素经常被用来作为绝对定位元素的容器块。

## 五、absolute 定位 ##

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于`<html>`。

> absolute 定位使元素的位置与文档流无关，因此不占据空间。  
> absolute 定位的元素和其他元素重叠。

## 六、sticky 定位 ##

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

`position: sticky;` 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 `position:relative` 与 `position:fixed` 定位之间切换。

它的行为就像 `position:relative;` 而当页面滚动超出目标区域时，它的表现就像 `position:fixed;`，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

> 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

## 七、重叠的元素 ##

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。

`z-index`属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

> 一个元素可以有正数或负数的堆叠顺序。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

**注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。**

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS position定位

文档流文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。让元素脱离文档流的方法

蔚落/ 2023年07月21日 05:58/ 0 赞/ 77 阅读

相关 CSS中的定位布局position

CSS中的定位布局position 定位时，通常使用left，top，right，bottom4个属性来进行定义一、静态定位 static left，top,r

小鱼儿/ 2023年03月02日 14:59/ 0 赞/ 38 阅读

相关浅谈CSS中的Position(定位)

文章目录一、position的属性值二、static 定位三、fixed 定位四、relative 定位

落日映苍穹つ/ 2022年12月19日 08:50/ 0 赞/ 147 阅读

相关 CSS之position定位

一、前言 CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。position方式包

太过爱你忘了你带给我的痛/ 2022年12月14日 15:54/ 0 赞/ 247 阅读

相关 CSS基础：浅谈position

浅谈position > 定位（position）允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位

喜欢ヅ旅行/ 2022年10月31日 14:56/ 0 赞/ 220 阅读

相关 DIV+CSS定位position

position属性该属性是用于对元素进行定位。 css的三种定位机制普通流，浮动和绝对定位普通流：普通流中的元素的位置由元素在 (X)HTML 中的位置

╰+哭是因爲堅強的太久メ/ 2022年08月01日 01:26/ 0 赞/ 252 阅读

相关 CSS Position(定位)介绍

CSS Position(定位) 定位的方法有4种： 1.static定位 2.relative定位 3.absolute定位 4.fixed定位

超、凢脫俗/ 2022年06月09日 13:56/ 0 赞/ 223 阅读

相关 css定位 position：sticky

定位有各种各样的类型，我们来看看这个sticky ( 尽管兼容性有些问题，但是却很好用 )；先来演示一下： <!doctype html> < html> < he

￡神魔★判官ぃ/ 2022年05月28日 04:37/ 0 赞/ 279 阅读

相关 CSS Position 定位属性

[CSS Position 定位属性][CSS Position] 　　本篇文章主要介绍元素的Position属性，此属性可以设置元素在页面的定位方式。目录 1

深藏阁楼爱情的钟/ 2022年03月31日 13:51/ 0 赞/ 366 阅读

相关【CSS】 Position(定位)

position 属性指定了元素的定位类型。 position 属性的五个值： ![在这里插入图片描述][20190128174805636.png] 元素可以使用

朱雀/ 2022年03月22日 14:15/ 0 赞/ 359 阅读