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.
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>>Solution :
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>