Mat*_*ott 156
静态定位是元素的默认定位模型.它们显示在作为普通HTML流程的一部分呈现的页面中.静态定位的元素不服从left,top,right和bottom规则:
相对定位,可以指定一个特定的偏移量(left,top等等),这是相对于在HTML流动的元件的正常位置.因此,如果我有一个文本框,div我可以在文本框上应用相对定位,使其显示在相对于通常放置在以下位置的位置的特定位置div:
还有绝对定位 - 您可以指定元素相对于整个文档的确切位置,或者指定元素树中下一个相对定位的元素:
当a position: relative应用于层次结构中的父元素时:
注意我们的绝对位置元素是如何被相对定位的元素绑定的.
最后是固定的.固定定位将元素限制在视口中的特定位置,该位置在滚动期间保持原位:
您还可能会观察到固定定位元素不会导致滚动的行为,因为它们不被视为绑定到视口:
绝对定位的元素仍然被视口绑定并将导致滚动:
..当然,你的父元素overflow: ?用来确定滚动的行为(如果有的话).
通过绝对定位和固定定位,元素从HTML流中取出.
- @cram2208因为相对使得子项绝对定位的节点相对于它们定位,静态允许绝对定位的子项忽略它们的位置并相对于最近的相对定位元素定位.它是一个重要的概念 (7认同)
- 答案很好,但(对于相对位置)不是基于元素正常位置的偏移量？ (4认同)
- 我同意Baztoune,这个相对定位元素的定义是误导性的.`static`和`relative`元素是相同的,除了后者你可以相对于它的原始位置**重新定位它**,而不是包含元素 - 这就是`absolute`进来的地方.而且,像任何元素一样使用除`static`之外的值定位,你可以使用`z-index`. (4认同)
- 我想知道为什么CSS仍然会实现`position:static;`而不是简单地将它替换为`position:relative;`默认情况下？如果一个人不想定位除了'top:0;`和`left:0;`之外的项目,那么让我们不要这样做吧？是否仍然需要`position:static;`作为CSS的一部分？ (3认同)
小智 5
回答“为什么CSS仍将实现位置：静态；” 在一个场景中，为父级使用position：relative，为子级使用position：absolute限制子级的缩放宽度。在水平菜单系统中，您可能会有链接的“列”，使用“ width：auto”不适用于相对的父级。在这种情况下，将其更改为“静态”将允许宽度根据其中的内容而变化。
我花了好几个小时，想知道为什么我无法根据容器中的内容量来调整容器。希望这可以帮助！