Link to sectionExamples

by hrebejk

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX -->

<div>Static</div>
<div style="display: flex">
   <div class="moved">Mov</div>
   <div>
     ddddd<br>sdjdfslkaklsj
   </div>
</div>
<div>Static</div>

CSS

body {
  margin-left: 100px;
}

div { 
  background-color: skyblue;
  position: relative;
}

.moved {
  transform: translateX(calc(-100% - 30px)); /* Equal to translate(10px) */
  background-color: pink;  
  position: absolute;
}