The entire content of the page is reduced, in proportion to the size of the window (wrote a script, which translates the transform: scale the body ) and reduces everything perfectly, but all floating fixed windows are rigidly fixed in a certain position of the document. That is fixed does not behave as it should lead.

Is there any way to fix it with css without using a script?

 .child { display: block; position: fixed; top: 15px; left: 15px; padding: 25px; background: #5fba7d; color: #fff; font-size: 24px; } .paren { height: 5000px; } body { transform: scale(0.95); } 
 <div class="paren"> vrtvrtv <br>trvrvr <br>vrvrv <br>vrtvr <br>v <br>rfrv <br>r <br>v <br>r <br>v <br>r <br>v <br>v <br> <br> <div class="child"> Это плавающий блок </div> </div>

  • set fixed and remove the transform from the body and see how fixed leads behave. - Yevgeny Shevtsov
  • the element should be fixed in a certain part of the window, not a document - Evgeny Shevtsov

2 answers 2

Translation of the answer to a similar question

CSS Transforms spec describes this behavior. Elements with transformations applied become containers for internal elements with a fixed position. Therefore, position:fixed inside an element with some kind of transformation no longer behaves as fixed.

This will work when applied to a single element, i.e. the element will be positioned as fixed and then transformed.

  • did not understand whether it is possible or not, only using css? - Evgeny Shevtsov
  • @ EvgenyShevtsov, no, this behavior is according to the specification But you can just remove the fixed element from the transformation container - Grundy
  • Yes, yes, but the customer asked that all the elements on the screen be reduced in proportion to the reduction of the screen. therefore, the transformation applied to the body. more precisely, it is calculated by the script, depending on how much the screen has been reduced from the original size. Well, for the body of the container, I can not bear)) it would solve all my problems))) - Evgeny Shevtsov
  • @ EvgenyShevtsov, Then obviously you need to script and position the desired element. - Grundy

Set the position and, if necessary, the size of the floating windows in relative units, for example:

  top: 5vw; left: 10vw; padding: 10vw;
  • only the floating block did not - Evgeny Shevtsov