CODEWITHSUNDEEP
htmlcssangularsass
Mr.wiseguy
Mr.wiseguy

Reputation: 4252

center absolute div in absolute div

I am trying to create a countdown that looks as follows:

Countdown

The countdown consits of 4 parts:

The problem I am facing is that the text is not shown on top of the white container. This is due to the fact that I am using a ::before tag on the text and I cannot use z-index: -1 on the ::before because it would then go behind the map.

So I am forced to use 2 separate divs and align the text on top of the white container.

Code

The current code looks like this:

HTML:

<div>
  <span>{{countdown.days | slice:0:1}}</span>
  <span>{{countdown.days | slice:1:2}}</span>
  <span>{{countdown.days | slice:2:3}}</span>
  <p>{{"COUNTDOWN.DAYS" | translate}}</p>
</div>

Scss:

span {
  padding: 8px 4px;
  display: inline-block;
  font-size: $font-size-xl;
  color: $font-secondary-color;

  &:not(:first-child) {
    margin-left: 0.2em;
  }
}

span:not(.indicator)::before {
  content: "";
  background: url(../../../assets/img/counters/counterContainer.svg) no-repeat;
  background-size: contain;
  position: absolute;
  width: 24px;
  height: 44px;
  margin-left: -5px;
  // z-index: -1;
  margin-top: -2px;
}

p {
  text-align: center;
  color: $orange-light;
  font-weight: $font-weight-normal;
}

The code above results in the image of the countdown, but with the problem the the text is hidden behind the span::before.

I have tried

I have tried to use 2 absolute divs. This works for 1 number, but it doesn't align well next to eachother. Every following number is stacked on top of the last one. Also I cannot seem to center the text on top of the container.

HTML:

<div>
   <p>0</p> <!-- The time left -->
   <span></span> <!-- The white container -->
</div>

Scss:

div {
  position: relative;
  display: inline-block;

  p {
   position: absolute;
   display: inline-block;
   z-index: 2;
  }

  span {
   content: "",
   background: url(../../../assets/img/counters/counterContainer.svg) no-repeat;
   background-size: contain;
   position: absolute;
   width: 24px;
   height: 44px;
  }
}

So I do not know of any more or better options to align two divs on top of eachother and make other numbers align next to eachother (as shown).

Update

A simple code pen showing my problem: CodePen

Upvotes: 0

Views: 90

Answers (2)

misorude
misorude

Reputation: 3431

and I cannot use z-index: -1 on the ::before because it would then go behind the map

Easily fixable, if you “lift” the span element itself onto a higher z-index first:

span {
  position: relative;
  z-index: 1;
}

https://codepen.io/anon/pen/KGBJam

Upvotes: 1

Rogelio
Rogelio

Reputation: 1094

have you tried using a flex box? 

.holder-thing {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  background: grey;
  height:100px;
  width:200px;
}

.white-box {
  width: 40px;
  height: 60px;
  background:white;
  
}

.number-thing {
  justify-content:center;
  display: flex;
  margin: 4px 4px;
  flex-direction: column;
}
<div class='holder-thing'>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions