Hey,@chrisdavidmills Kindly assist me on this.
I know I am missing out something please guide me.
Link:
https://codepen.io/kan_coder/pen/PoZPjNe
Topic Link:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills
Good Day…!!
So, looking over this one, you’ve got question 1 nearly right. the one issue here is that absolutely-positioned elements are positioned relative to the <body> element’s edge, if they don’t have another positioned ancestor. So basically, you need to position it relative to the <div>'s edge — this is done by giving it some positioning. The best value to give it is normally relative, unless you specifically want to do something interesting to its positioning as well.
For the extra challenge — “As an extra challenge, can you change the target to display underneath the text?” — I’ll not give you the exact answer to this, but one simple way is to use CSS Tables.
For question 2 — this is really easy. You can do it in one line of CSS. All you need is a specific positioning value, to fix it in place relative to the viewport.
I’ll taggle along your thread.
I can’t for the life of me figure out any other way to solve the extra challenge than simply adding a bottom margin to the last paragraph.
https://codepen.io/boallan/pen/XWdeMWZ
@chrisdavidmills could you give a further hint as how to do it with tables?
Are the any other ways to put an absolutely positioned element “back in the flow”?