Absolute elements are removed from the flow and do not take up space in the document flow. That’s why they overlap other elements unless you have accounted for the space they occupy.!
If you want to place absolute elements in relation to a parent then that parent needs to be position:relative so that it forms a context for the absolutely placed children.
You should set your big playButtons to position:relative and then you can absolutely place those smaller buttons in the middle where you want them. The larger parent holds open the space of the document so that content underneath doesn’t overlap and then the smaller buttons are placed in the middle of the parent and have no effect on the flow of the page.
The !important is because you like to use inline styles so I only reproduce here the extra rules you need whether applied inline or not. Note that although I only added position:absolute to .play it is the margins that you have applied to that element that then make it go central (you could of course use co-ordinates instead now that it is absolutely placed but either will work).
And added it inside the div. And it seems like it works perfectly fine without the inclusion of position: Relative. Do I need to add that in, or can I leave it out?
I was told to only use codes that need to be added. So, I assume if it works fine without position: relative, then I don’t need to add it. Unless I’m wrong in that thinking.
Anything that is positioned absolute, looks up at its parents for anything that is positioned relative. The absolute element then positions itself in reference to that relative.
If nothing is declared as being relative, then the absolutely positioned elements will default to being positioned relative to the <html> element.
So, if you don’t mind absolutely positioned elements all defaulting to positioning themselves to the <html> element, then keep on leaving out relative.
One of the reasons why relative is used though, is that it does help for debugging later to know what the absolute positioned elements are supposed to be relative to.
Imagine that you have a section that is 500 pixels away from the left of the screen.
When it comes to positioning an absolute element inside of that section, one solution is to position that element left: 500px but when you have lots of elements in there, you then have to update all of them when the section moves.
Another solution is to say that the section is the relative, and position each element left: 0px instead. That way each element will be positioned relative to the section. The section is still 500 px away from the left of the screen, and the elements are 0 away from the left of the section. rather than relative to the top left of the screen. That way when the section moves, all of the positioned elements inside of it will move with it too.
Indeed. But when you’re posting here, or on JSFiddle, then you should use the correct code.
If you wish to draw attention to the fact that Blogger adds an incorrect closing tag, then make a note to that effect in your post, but at least ensure that your code is correct to start with.
(I’d also recommend abandoning Blogger, if it doesn’t allow you to do what you want correctly.)
Maybe it’s time we dealt with the elephant in the room and found you an alternative platform; one which can be fully controlled by you, and where you can learn to use more modern coding techniques.
You mean like this, this doesn’t work, still does it. It also does it with other tags, where if I have one </image> tag, it’ll add another one in. I have no idea how to prevent it from doing any of that.
