CSS 绝对定位——我需要指定顶部、右侧、底部和左侧吗？

Question

我的样式表中有一个元素是绝对定位的，我注意到所有四个方向都列为 0:

input.flip + label:before, input.flip + label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 2.2em;
}

在所有方向都是0的情况下，是否需要指定所有方向，或者只指定top和是否同样好离开了?

input.flip + label:before, input.flip + label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 2.2em;
}

Answer 1

在这里，将所有坐标设置为零告诉元素覆盖整个父级(positionned)。如果标签是 position:relative 或 fixed 或 absolute 它将覆盖它。

它类似于

top:0;
left:0;
height:100%;
width:100%;

但是它可以有另一个用于调整元素大小的目的，添加 margin:auto;将元素居中定位到父元素中。如果没有父定位，则视口(viewport)作为引用。例子

input,
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  line-height: 2.2em;
  margin: auto;
}

div {
  background: lime;/* show me */
}

input {
  z-index: 1;/* let me be on top */
}

<input type="text" value="i have a defaut size" />
<div> well i have size that content, coordonates or height/width ,  shall give me </div>