Cover Image In Tag

Question

I was wondering if instead of using "margin-top: -90;" if there was a better solution to basically make the "aside" tag basically "invisible" to the rest of the tags. Still visible but doesn't take up space basically. Here's the code:

https://code.sololearn.com/WKTVESWTogOG/?ref=app

Answer 1

Yes there are better solution to make some elements not taking account by others in the content stream...
For both cases, you need to retrieve the '-90%' margin, to avoid the <h1> element to disppear from display ;P

Use of 'float' property: on <aside> element, this will release it from the normal stream, so next elements can place themselves to the side of element give next content... try it with 'float:left' in your <aside> css rules...

Use of 'position:absolute;' (apply it also to <aside>) has exact behaviour you describe: contrarly to the 'float' property which don't retriieve completly the element from the normal stream (the witdh available for the next inlined element is not the whole width), it will remove totally the element from the content stream, displaying it as a layer, independently... ('position:relative;' is the same, but continuing to reserve space at initial computed position of element, and refering to origin of its own original (computed) position in the stream rather of the first positionned parent origin ^^

'position' is a powerful property (as 'float' is also), but do not have an obvious behaviour, wich is too much dependant of different context... Anyway, try and fails will finally teach them and make them understood ;)