<div class="cool-content-box">
  Here's a cool content box that moves when you hover! It has a notice inside it which is positoin fixed. Notice how that notice changes location depending on whether or not it's transitioning. Remember that position fixed items like the notice attach to the viewport unless one of their parents has transform.
  <div class="notice">Notice!</div>
body {
  background-color: #eee;
  display: flex;
  min-height: 100vh;

.cool-content-box {
  background-color: #fff;
  width: 70vw;
  padding: 1em;
  margin: auto;
  transition: transform 1s;
  cursor: pointer;
  &:hover {
    transform: translateY(-1em);

.notice {
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  background-color: #777;
  color: #eee;
  padding: 1em;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.