<div class="panel">panel</div>

<div class="ext-panel panel">ext-panel</div>


body {
  --panel-size: 50px;
  outline: 2px solid red;
  transform: translate(0, var(--panel-size));
  
  height: 50vh;
  position: relative;
}

.panel {
  height: var(--panel-size);
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  color:#fff;
  text-align: center;
  width: 100%;
}


.ext-panel {
    transform: translate(0, calc(-1 * var(--panel-size) - 10px));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.