Solution 1 :

Add box-sizing: border-box; in .overlay will work.

.container {
  background: pink;
  width: 40rem;
  height: 25rem;
  display: flex;
  flex-wrap: wrap;
}

.box {
  background: yellow;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
  position: relative;
}

.overlay {
  border: 0.75rem solid red;
  position: absoulte;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Use box-sizing */
}
<div class="container">
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
</div>

Problem :

I have a series of divs that each have an overlay div on top of them. I want this overlay to have a perfect border around the original parent div but instead get an off centered border for the overlay. How do I make sure that the border of the child div is properly aligned? Thanks.

.container {
  background: pink;
  width: 40rem;
  height: 25rem;
  display: flex;
  flex-wrap: wrap;
}

.box {
  background: yellow;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
  position: relative;
}

.overlay {
  border: 0.75rem solid red;
  position: absoulte;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
  <div class="box">
    <div class="overlay"></div>
  </div>
</div>

By

Leave a Reply

Your email address will not be published. Required fields are marked *