htmlcss

CSS setting child position on top of their parent


I would like to design the image below using HTML and CSS.

And the image below is the output of the code I have implemented.

As you may have noticed, I couldn't place the blue card on top of the parent card and move it to the right.

Even though I set the parent to relative and the child to absolute, when I move it, it shifts within the parent.

body {
  font-family: sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.card-top {
  width: 70%;
  height: 10px;
  background-color: red;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.card-center {
  width: 90%;
  height: 300px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: #FF9696;
  padding: 20px;
}

.card-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: red;
  z-index: -1;
  /*opacity: 0.2;*/
}

.card-center-left {
  width: 50px;
  height: 150px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 50%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transform: translateY(-50%);
}

.card-center-right {
  width: 50px;
  height: 100px;
  background-color: blue;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

.card-bottom {
  width: 70%;
  height: 10px;
  background-color: red;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
<div class="card-top"></div>

<div class="card-center">
  <div class="card-center-left"></div>
  <div class="card-center-right"></div>
  <p>SAMPLE TEXT</p>
</div>

<div class="card-bottom"></div>


Solution

  • Firstly you have to allow overflow on the card so the blue element isn't truncated. Then you can use the combination translation syntax to shift horizontally as well. Note that I modified the card's width to consider this overflow.

    :root {
      --primaryColor: #E91515;
      --secondaryColor: #FF9696;
    }
    
    body {
      font-family: sans-serif;
      margin: 0;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100vh;
    }
    
    .card-top {
      width: 70%;
      height: 10px;
      background-color: var(--primaryColor);
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
    
    .card-center {
      width: calc(100% - 100px); /* <------------------------- HERE */
      height: 300px;
      /* overflow: hidden; <---------------------------------- HERE */
      background-color: #fff;
      border-radius: 20px;
      position: relative;
      border-style: solid;
      border-color: var(--secondaryColor);
      padding: 20px;
    }
    
    .card-center::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background-color: var(--primaryColor);
      z-index: -1;
    }
    
    .card-center-left {
      width: 50px;
      height: 150px;
      background-color: #FF0000;
      position: absolute;
      left: 0;
      top: 50%;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      transform: translateY(-50%);
    }
    
    .card-center-right {
      width: 50px;
      height: 100px;
      background-color: #235396;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%); /* <------------------------- HERE */
      z-index: 999;
      border-radius: 10px;
      border: 3px solid black;
    }
    
    .card-bottom {
      width: 70%;
      height: 10px;
      background-color: red;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    <div class="card-top"></div>
    
    <div class="card-center">
      <div class="card-center-left"></div>
      <div class="card-center-right"></div>
      <p>SAMPLE TEXT</p>
    </div>
    
    <div class="card-bottom"></div>