JROB JROB - 6 months ago 8
CSS Question

CSS absolute positioning- do I need to specify top, right, bottom AND left?

I have an element in my stylesheet that is absolute positioned and noticed that all four directions are listed as

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;
}


In a case where all directions are
0
, is it necessary to specify all of them, or would it be just as good to only specify
top
and
left
?

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

Answer

here , setting all coordonates to zero tells the element to cover the whole parent (positionned).if label is position:relative or fixed or absolute it will cover it .

it is similar to

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

But it can have another purpose for element sized, adding margin:auto; will center element into the parent positioned. if there is no parent positionned, then the viewport come the reference. example

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>

Comments