什么"位置:亲和"实际上意味着

时间:2016-10-13 06:28:14

标签: html css position w3c

w3.org/TR/CSS2 says

  

对于其他元素,如果元素的位置是相对的'或者'静态',包含块由最近的块容器祖先盒的内容边缘组成。

这是什么意思?我读到它是因为position: relative不会影响元素本身,但实际上会影响其父级 - 包含的块

那么,要更改包含块的CSS,我是否必须将position应用于其子项?

难道不奇怪吗?将position: relative应用于父级时会有一种模式,而position: absolute会将其应用于某个子级,以使该绝对定位的子级与父级绑定。

2 个答案:

答案 0 :(得分:1)

  

...实际上会影响其父级 - 包含块。

的要点
  

...如果元素的位置是“相对的”。或者'静态',包含   块由最近的块容器的内容边缘形成   祖先盒子。

是解释其父级不一定是其包含块。

最值得注意的是,如果它是position:relative且其父级是display:inline,那么它的父级其包含的块,但是DOM树的更远处的元素是。

答案 1 :(得分:0)

position:relative表示已经给定相对位置的元素将相对于自身调整自身。例如:

h1给出以下CSS:

h1 {
  position: relative;
  top: 20px;
  left: 20px;
}

然后它将从原始位置向上和向左移动20px。检查我的小提琴:https://jsfiddle.net/w6sowku5/