How to make a relative positioned element not affect layout?

user_16132839 0
Viewed 391

I have two relatively positioned elements that are next to each other. They both have text. The display of these 2 elements is inline-block, so the result looks like this: Image I am trying to make these two elements show in the same exact place, so that "Pro" overlaps "Free". I know that is achievable if I position the two elements absolutely, and not relatively. In my case, I am trying to create an animation and positioning the elements absolutely will be problematic, because I want the top and left of the elements to be 0 (I am trying to create an animation). I am also using bootstrap if that helps...

I've tried doing some searching but I still wasn't able to find anything useful. No one had the same error as me and I wasn't able to find anything useful in my case.

I also need this to work on other devices with different viewport widths and heights, so I can't just move the text 10 pixels to the left.

Here is the code: 

.direction {
    display: inline-block;
    position: relative;
}

.direction p {
    color: red;
    font-size: 50px;
    text-align: right;
}
<html>
  <body>
    <center>
      <div class="direction" id="webDiv">
        <p>Pro</p>
      </div>
      <div class="direction" id="codeDiv">
        <p>Free</p>
      </div>
    </center>
  </body>
</html>

css html
2 Answers

Use CSS grid:

.direction {
  grid-area:1/1; /* they will overlap */
  position: relative;
}

.direction p {
  color: red;
  font-size: 50px;
  text-align: right;
}

body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center; /* and placed at the center */
}
<div class="direction" id="webDiv">
  <p>Pro</p>
</div>
<div class="direction" id="codeDiv">
  <p>Free</p>
</div>

user_86203330

I know the answer to my own question, it wasn't exactly what I expected to do but it works and it doesn't mess with the transition I'm trying to create. I just set the width of direction to 100vw and it's position to absolute. The divs still weren't in the center, they were exactly 50vw away from the center. I set the left-margin of the divs to -50vw.

user_161328390
Related