当前位置：文江博客话题详情

静态定位和相对定位的区别

发布于 2024-10-17 17:23:36 字数 32 浏览 8 评论 0原文

在CSS中，静态（默认）定位和相对定位有什么区别？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2024-10-24 17:23:36

静态定位是元素的默认定位模型。它们显示在页面中，并作为正常 HTML 流的一部分呈现。静态定位元素不遵守 left、top、right 和 bottom 规则：

静态定位元素遵循正常的 HTML 流程。

相对定位允许您指定特定的偏移量（left、top 等），它相对于 HTML 流中元素的正常位置。因此，如果我在 div 内有一个文本框，我可以在文本框上应用相对定位，使其显示在相对于它通常放置在 div 内的位置的特定位置：

>也是绝对定位 - 您可以指定元素相对于整个文档的确切位置，或元素树上的下一个相对定位的元素

： sstatic.net/fHUPW.gif" alt="绝对定位元素从 HTML 流中取出，可以定位在文档中的特定位置...">

当 position:relative应用于层次结构中的父元素：

请注意我们的绝对位置元素是如何与相对定位元素绑定的。

最后是固定的。固定定位将元素限制在视口中的特定位置，该位置在滚动期间保持在原位：

固定位置元素也会被取出HTML 流，但不受视口约束，不会随页面滚动。

您还可能会观察到固定位置元素不会导致滚动的行为，因为它们不被视为受视口约束：

固定定位元素对滚动没有影响。

而绝对定位元素仍然受视口约束并会导致滚动：

绝对定位的元素仍然受到视口边界的影响，除非在父元素上使用溢出。

..当然除非您的父元素使用 overflow: ? 来确定滚动的行为（如果有）。

通过绝对定位和固定定位，元素被从 HTML 流中取出。

回复收藏 0 原文

塔塔猫 2024-10-24 17:23:36

回答“为什么CSS仍然会实现position: static;”在一种场景中，对父级使用position:relative，对子级使用position:absolute，会限制子级的缩放宽度。在水平菜单系统中，您可以拥有链接的“列”，使用“width：auto”不适用于相对父级。在这种情况下，将其更改为“静态”将允许宽度根据其中的内容而变化。

我花了好几个小时想知道为什么我无法让我的容器根据其中的内容量进行调整。希望这有帮助！

回复收藏 0 原文

心如荒岛 2024-10-24 17:23:36

您可以在这里看到一个简单的概述： W3School

另外，如果我没记错的话，在声明相对于元素，默认情况下它会保持在原来的位置，但您可以获得相对于该元素绝对定位其中元素的能力，我在过去发现这非常有用。

回复收藏 0 原文

枯叶蝶 2024-10-24 17:23:36

相对位置允许您使用上/下/左/右进行定位。静态不会让你这样做，除非你使用边距参数。 Top 和 margin-top 之间是有区别的。

您不需要过多使用 static，因为它是默认的

回复收藏 0 原文

天涯沦落人 2024-10-24 17:23:36

相对位置是相对于正常流动的。该元素的相对位置（带有偏移）是相对于该元素在不移动时通常所处的位置的。

回复收藏 0 原文

落花浅忆 2024-10-24 17:23:36

Matthew Abbott 有一个非常好的答案。

绝对和相对定位的项目遵循静态定位项目的 top、left、right 和 bottom 命令（偏移量）不是。

相对定位的项目会从它们通常在 html 中的位置移动偏移量。

绝对定位的项目从文档或 DOM 树上的下一个相对定位的元素移动偏移量。

回复收藏 0 原文

薄荷港 2024-10-24 17:23:36

静态：默认情况下元素的位置是静态的。如果您添加顶部、底部、右侧或左侧等属性，则不会执行任何操作。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#static #middle{
    position:static;
    top:100px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
   <section id="static">
       <h2>Static</h2>
       <div></div>
       <div id="middle"></div>
       <div></div>
   </section>
</body>
</html>

相对：位置的变化将与该 div 的原始位置相关。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#relative #middle{
    position:relative;
    top:100px;
    left:100px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
 <section id="relative">
    <h2>Relative</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

绝对：它相对于其最近定位的祖先（如果有）进行定位；否则，它是相对于初始包含块放置的。来源：MDN

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#absolute{
    position:relative;
}

#absolute #middle{
    position:absolute;
    top:10px;
    left:10px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
    <h2>Absolute</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

固定：即使我们滚动页面，固定属性也会保持在同一位置。该位置始终相对于包含块。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#fixed #middle{
    position:fixed;
    top:10px;
    left:10px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
    <h2>Fixed</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>
</body>
</html>

Static: By default the position of elements is static. If you add property such as top, bottom, right, or left nothing will be implemented.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#static #middle{
    position:static;
    top:100px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
   <section id="static">
       <h2>Static</h2>
       <div></div>
       <div id="middle"></div>
       <div></div>
   </section>
</body>
</html>

Relative: The change in position will be relevant to that div's original place.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#relative #middle{
    position:relative;
    top:100px;
    left:100px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
 <section id="relative">
    <h2>Relative</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

Absolute: It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Source:MDN

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#absolute{
    position:relative;
}

#absolute #middle{
    position:absolute;
    top:10px;
    left:10px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
    <h2>Absolute</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

Fixed: The fixed property would stay at the same place even after we scroll the page. The position is relative to the containing block always.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#fixed #middle{
    position:fixed;
    top:10px;
    left:10px;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
    <h2>Fixed</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>
</body>
</html>

回复收藏 0 原文

~没有更多了~