在css中position relative是什么意思 (在css中position属性可以为元素设置浮动)

本文目录导航：

• 在css中position:relative是什么意思？
• 简述css元素定位有几种类型,区分有什么特点
• CSS文档定位指南：static、relative、absolute、fixed、sticky详解

在css中position:relative是什么意思？

在CSS中，`position: relative`是一种定位模式。

详细解释如下：

一、`position: relative`的基本含意

当咱们在CSS中为元素设置`position: relative`时，该元素会相关于其反常位置启动定位。

这象征着，即使元素设置了`relative`定位，它依然会保管其在文档流中的空间，就如同它依然处于反常位置一样。

因此，其余元素在规划时仍会思考到这个元素原本所占的空间。

这关于调整元素的位置而不影响其规划顺序十分有用。

二、相对定位的特点

经常使用`position: relative`后，可以经过`top`、`right`、`bottom`和`left`属性来调整元素相关于其原始位置的位置。

这种调整不会扭转其余元素的规划，由于该元素依然占据其在文档流中的空间。

这是它与相对定位的重要区别之一，相对定位的元素会从文档流中移除，不占据任何空间。

三、实践运行场景

相对定位罕用于须要多个元素相关于彼此启动准确定位的状况。

例如，创立一个下拉菜单时，或者会经常使用相对定位来确保下拉菜单项相关于菜单按钮的位置正确。

此外，当须要调整某个元素的位置而不影响其余元素的规划时，也可以经常使用相对定位。

例如，调整图片或图标相关于文本的位置。

在这种状况下，可以经常使用相对定位来确保图片或图标相关于其原始位置移动，同时不会搅扰其余文本或元素的规划。

总之，CSS中的`position: relative`提供了一种灵敏的模式来调整元素的位置，而不会搅扰文档的其余局部。

这种定位模式在解决复杂的规划和设计时十分有用。

简述css元素定位有几种类型,区分有什么特点

CSS元素定位重要有四种类型：静态定位（Static）、相对定位（Relative）、相对定位（Absolute）和固定定位（Fixed）。

1. 静态定位（Static）：这是元素的自动值，即元素在文档的反常流中定位。

静态定位的元素不会遭到 top, bottom, left, right等定位属性的影响。

2. 相对定位（Relative）：相对定位的元素会相关于它在反常流中的原始位置启动定位。

也就是说，即使你对它运行了 top, bottom, left, right 等属性，它仍会保管其在文档流中的空间。

例如，假设你对一个相对定位的元素运行 left: 20px，那么这个元素会向左移动20px，然而它原本在文档流中的位置依然会被保管。

3. 相对定位（Absolute）：相对定位的元素会相关于其最近的已定位后人元素（而不是相关于视窗）启动定位。

假设没有已定位的后人元素，那么它会相关于文档的初始蕴含块启动定位。

相对定位的元素会从文档流中齐全移除，不占用任何空间。

例如，假设你对一个相对定位的元素运行 top: 20px; left: 20px，那么这个元素会相关于其最近的已定位后人元素向下和向右移动20px。

4. 固定定位（Fixed）：固定定位的元素会相关于阅读器视窗启动定位，即使页面滚动，它也会逗留在同一的位置。

固定定位的元素会从文档流中齐全移除，不占用任何空间。

例如，经常出现的网页回顶部按钮理论就会经常使用固定定位，使其一直在视窗的右下角显示。

以上四种定位模式各有特点，可以依据详细需求选用经常使用。

同时，它们也可以相互组合，发明出更丰盛的规划成果。

比如，可以经过将一个相对定位的元素作为另一个相对定位元素的父元素，来成功一些不凡的规划需求。

CSS文档定位指南：static、relative、absolute、fixed、sticky详解

CSS中position属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。

静态定位position:static

此属性未HTML元素自动定位，一个元素没有以任何不凡的模式定位，它总是依照页面的反常流程定位。

在此属性下，属性值top、left、right、bottom和z-index对HTML元素没有影响。

<divclass=parent><divclass=child></div></div><divclass=sibling></div><styletype=text/css>{width:480px;height:320px;background-color:#;}{width:240px;height:160px;background-color:#ff0000;}{width:240px;height:160px;background-color:#0000ff;}</style>

成果如图：

为什么经常使用它呢？将元素设置为position:static的惟一要素是强迫删除运行于不可管理的元素上的某些定位。

相对定位position:relative

在此属性下，设置相对定位元素的top、right、bottom和left属性会造成它被调整到远离其反常位置。

<divclass=parent><divclass=child></div></div><divclass=sibling></div><styletype=text/css>{position:relative;width:480px;height:320px;background-color:#;z-index:5;left:50px;top:50px;}{width:240px;height:160px;background-color:#ff0000;}{width:240px;height:160px;background-color:#0000ff;}</style>

成果如图：

为什么要经常使用它？此属性下引入了在该元素上经常使用z-index的才干，这关于静态定位position:static的元素并不真正起作用。

相对定位position:absolute

此属性是相关于最近父级元素的位置，假设相对定位元素没有定位的父级元素，它将经常使用文档body并随着页面滚动而移动。

position:absolute相关于其父元素的位置搁置一个元素并扭转它周围的规划。

关于相对定位的掂量是，这些元素将从页面的元素流中删除，具备这种定位类型的元素不受其它元素的影响，也不影响其它元素。

<divclass=parent><divclass=child></div></div><divclass=sibling></div><styletype=text/css>{position:relative;width:480px;height:320px;background-color:#;}{position:absolute;width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}{position:absolute;width:240px;height:160px;left:100px;top:100px;background-color:#0000ff;z-index:1;}</style>

成果如图：

在此属性下，同一父级元素中，z-index值大的在最下层。

相对定位元素是相关于最近定位的后人来定位自身。

一旦它找到一个已定位的后人，该后人之上的元素的位置就不再关系。

相对定位和相对定位的重要区别在于，position:absolute会将子元素齐全脱离文档的反常流程，并且该子元素将相关于具备自己的位置集的第一个父元素启动定位。

固定定位position:fixed

相关于视窗定位，即使页面滚动，也一直逗留在同一位置上。

固定定位元素不会在其所在的页面中留下间隙，其余元素会填补缺失的中央。

<divclass=parent><divclass=child></div></div><divclass=sibling></div><styletype=text/css>{position:relative;width:480px;height:320px;background-color:#;}{width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}{position:fixed;width:240px;height:160px;right:50px;bottom:50px;background-color:#0000ff;z-index:1;}</style>

成果如图：

粘性定位position:sticky

基于用户的滚动位置定位，依据滚动位置在relative和fixed之间切换。

相对定位，直到在视窗中遇到给定的偏移位置，而后它固定到位，就像position:fixed一样。

position:sticky元素依据反常文档流启动定位，而后相对它的最近滚动后人（nearestscrollingancestor）和containingblock(最近块级后人nearestblock-levelancestor)，包括table-related元素，基于top、right、bottom和left的值启动偏移，偏移值不会影响任何其余元素的位置。

作者：天行无忌