I have seen developers using two different ways to define height and width of fixed element.
Way 1 :
div{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
}
Way 2 :
div{
position: fixed;
height: 100%;
width: 100%;
background: #000;
}
Both the ways gave me same results. How are they different? CSS developers! Help please... ;)
Awesome @maruru :) Thanks for sharing the demo.
Without setting up the top left right bottom value, the fixed positioned elements will have auto as their position. so you cannot really predict where they gonna be.
Marco Alka
Software Engineer, Technical Consultant & Mentor
Well, both methods are valid whenever you use a fixed or absolute position. top, right, left, bottom define how much each side of the div is away from the borders of the root element (or the parent element, in case you set the parent to
relative). height and width only set the div's height and width. This also means, that the first method can specify a div which is floating somewhere on the page, while the second will always position your div in the top left corner.Take a look at this JSFiddle, it demonstrates the difference when you use other values.