<div class="grid">
  <div class="demo-1">
  Demo Position Fixed Without Translate
  <div class="item">
  </div>
</div>

<div class="demo-1">
  Demo Position Fixed With Translate
  <div class="item-2">
  </div>
</div>
</div>
.grid {
  display:flex;
}
.demo-1 {
  border:1px solid #333;
  height:300px;
  width:300px;
  box-sizing:border-box;
  transform: translateZ(0);
  position: relative;
}
.demo-1:before {
  height:150px;
  width:100%;
  border-bottom:1px solid #333;
  content:'';
  position:absolute;
  z-index:1;
}
.item {
height:50px;
width:50px;
background:red;
position:fixed;
top:50%;
}
.item-2 {
height:50px;
width:50px;
background:red;
position:fixed;
top:50%;
transform:translateY(-50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.