Positioning Issue

[codeispoetry]

Concepts used:

1. content: “”
2. svg
3. Positioning
4. transform

I created this codepen →

Issue: that circle, which is positioned is not air-tight, but even If we change the size of the <p></p> font then the positioning gets distorted.

I am sure there should be a better method so that our objectives are achieved.

[SamA74]

Where do you want the circle to be?
Using transform with “magic numbers” is never likely to work.

This is just a guess at where you want it:-

[codeispoetry]

In this post @PaulOB sir has used translate:

can we also do this using translate property somehow? Just want to learn more.

[SamA74]

Translate will more the element relative to its original position, which in this case is below the <p> element, so you have had to rely on magic numbers to push it to the top on the <p>, which as is usually the case with magic numbers is a tragically fragile approach, because the height of the <p> can vary with differing screen widths and font sizes or edits to the content.
I used the absolute positioning to place it relative to the top of its parent container, which is probably best given the html structure where the element appears after the element it goes at the top of.

[codeispoetry]

@SamA74

I used the absolute positioning to place it relative to the top of its parent container

I didnt get it completely. Was this something that I didnt used?

[SamA74]

You did give the element the property of position: absolute but you did not then position it using any of the “side” keywords (top, bottom, left, right), you used translate to position it instead.

[PaulOB]

You could move the circle using flexbox.

e.g.

.circleplaced {
  padding: 10px 20px;
  background-color: #eee;
  max-width: 300px;
  position: relative;
  margin-top: 50px;
  display:flex;
  flex-direction:column;
}
.checkmark-container {
  order:-1;
  margin-top:-50px;
}