Question

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

Answer 1

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

statically-positioned elements obey normal HTML flow.

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

relatively-positioned elements obey HTML flow, but provide the ability to adjust their position relative to their normal position in HTML flow.

还有绝对定位 - 您可以指定元素相对于整个文档的确切位置，或元素树后面的下一个相对定位的元素：

absolutely-positioned elements are taken out of HTML flow and can be positioned at a specific place in the document...

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

...or positioned relative to the first parent element in the HTML tree that is relatively positioned.

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

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

fixed-positioned elements are also taken out of HTML flow, but are not bound by the viewport and will not scroll with the page.

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

fixed-positioned elements have no effect on scroll.

尽管绝对定位的元素仍然被视口绑定并且会导致滚动：

absolutely-positioned elements are still affected by the boundaries of the viewport, unless overflow is used on a parent element.

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

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

Answer 2

您可以在此处查看简单的概述：W3School

另外，如果我没记错的话，当声明一个元素相对时，它默认会保持在原来应该的位置，但你能够相对于这个元素绝对地将元素放在其中，我已经在过去发现非常有用。

Answer 3

位置相对允许您使用顶部/底部/左/右进行定位。除非您使用保证金参数，否则静态不允许您这样做。 Top和margin-top之间存在差异。

您不需要使用静态，因为它是默认的

Answer 4

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

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

Answer 5

相对位置相对于正常流量。该元素的相对位置（具有偏移量）相对于该元素在未移动时的正常位置。

Answer 6

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

绝对和相对定位的项目遵循top，left，right和bottom命令（偏移），而静态定位的项目则不遵守。

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

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

Answer 7

静态： STATIC定位元素是我们通过DEFAULT获得的（对象的正常定位）。

相对：相对于它的当前位置，但可以移动。或者RELATIVE定位元素相对于ITSELF定位。

Answer 8

静态和相对是位置属性。相对用于许多用途。不适合一个。但是请记住，静态和相对不会损害HTML的正常文档流程。当您将任何元素写入Html时，static是默认位置。如果元素具有相对位置，则该元素可以相对于其原始位置进行定位。当您想在较小的空间中调整元素时，请使用相对位置，这样就无需添加边距，填充e.t.c 如果元素具有相对位置并且具有子元素。在这里，我们可以相对于其父级进行测量。如果为子级添加10％的宽度，则意味着（width + padding）x10％，但是不添加相对关键字，则得到的宽度为10％。除此之外，亲戚最重要的用法是：您可以将任何元素置于其顶部。但是您必须在child上使用“ absolute”关键字。在为child添加绝对关键字时，child不在正常文档流程中

Answer 9

静态：默认情况下，元素的位置是静态的。如果您添加诸如 top、bottom、right 或 left 之类的属性，则不会实现任何内容。

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：位置的变化将与该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>

Absolute：相对于其最近定位的祖先定位，如果有的话；否则，它相对于初始包含块放置。来源：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>

静态和相对定位之间的差异

9 个答案: