Can i put a box in half over another box (without px)?

Question

Is there an optimal solution for my problem? I have a green box with position: relative; and a white box with position: absolute;

The absolute box has top: 0; I only wish that the white box is exactly centered (with one half over the green box and the other half outside). Is there a solution for this in CSS, regardless of the height of the box in px?

Thank you in advance!

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Jun 10 '22 at 14:53

score 1 · Accepted Answer · answered Jun 10 '22 at 14:56

1

Translate is your friend:

.white-box {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}

answered Jun 10 '22 at 14:56

Mike Robinson

24,971
8
61
83

1

Simple and helpful, thank you very much! :) – Andreas Jun 10 '22 at 15:04

Can i put a box in half over another box (without px)?

1 Answers1