I don't understand why the div.class moves to the right bottom. I really want to know the meaning of '0' precisely in fixed position.

Why does the border never stretch to the right side if I change (bottom: 0; right: 0;) into (top: 0; right: 0; bottom: 0; left: 0;)?

div.fixed {
  position: fixed;
  width: 300px;
  bottom: 0;
  right: 0;
  border: 3px solid #73ad21;
}

<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div >
  This div element has position: fixed;
</div>

CodePudding user response：

I don't understand why the div.class moves to the right bottom.

That's what the bottom and right CSS properties are for. They position the bottom and right side of the element, counting from the bottom and right side -- in this case from the viewport, since position is fixed.

I really want to know the meaning of '0' precisely in fixed position.

0 is a number of units. It could have been specified as 0px or 0pt or with another unit, but since it doesn't matter which unit is used, as it is 0 anyway, it is specified without unit. It represents the distance from the bounding box of the viewport.

Why does the border never stretch to the right side if I change (bottom: 0; right: 0;) into (top: 0; right: 0; bottom: 0; left: 0;)?

Because the width: 300px specification stipulates what the width of the element should be, and so the rendering has to give up on right: 0, as otherwise the width would be different. However, if you drop the width specification, the element will take the whole space of the viewport:

div.fixed {
  position: fixed;
  _width: 300px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #73AD21;
}

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div >
This div element has position: fixed;
</div>

CodePudding user response：

The number represents the distance from the bottom/right. So, going bottom: 10px would place it 10px from the bottom of the window. It's basically a way of positioning it. Hope this helps!

CodePudding user response：

@Gerald when you set the position fixed, the element is stand by fixed position in the screen. You can change the position of element with top, left, right, bottom of css properties. For now if you set bottom:0, right: 0, the element is set in the bottom and right corner of the screen. If you want it set left bottom corner, set left:0, bottom:0, and remove right:0. Also you can set px, em, vw, vh or % for example, left: 10px, there would be 10px space between element and left. If you want bottom center, set bottom:0, left 50%, transform: translateX(-50%) Hope it is helpful to you~