0

Why does changing the width or height of a parent element affect the position of its child elements?

I am making an SVG cartoon character comprised of several SVG parts(hair, nose, mouth), I painstakingly positioned all the elements where they should be by setting the position of all the parts to relative and using the bottom,left,right, and top properties. All these parts are inside a div element that has a width of 1000px and a height of 800px. The problem is when I change the width or height of this div container the positioning of the different parts change. I want the position of the SVG parts to be independent of any container size changes. Also, the SVG parts are appearing outside the container before I position them. What is going on here and what can I do to fix this problem? Any help will be greatly appreciated https://code.sololearn.com/WPv1GhapmOn7/?ref=app

8th Apr 2021, 6:05 PM
Uchiha
14 Answers
+ 2
as you're using 'px' unit for positionning, the position doesn't be changed when you modify the <div> container size... also, you're using 'position:relative', while it should be advisable to use 'absolute' (and set 'relative' to the container): this would allow you to easiest place each of your child elements... really 'relatively' to the container, with each child default placed at 'top:0; left:0'. then you should use '%' unit to place children relatively to width/height of the container ^^ start by playing with that, then ask for more if needed ;)
10th Apr 2021, 12:20 PM
visph
visph - avatar
+ 2
in fact, you only need to define z-index to order each chid layouts (but you could also easily avoiding that by ordering directly the children themselves in the html) however, you're missing one 'class="part"' (as all div children are of that class, you could also avoid them by targeting the div children directly) anyway, here's a simplified version (but not the most one), responsive sized (relatively to viewport height): https://code.sololearn.com/W6o73VaaaUdL/?ref=app
10th Apr 2021, 12:57 PM
visph
visph - avatar
+ 2
and more simplified version (ordering inside html): https://code.sololearn.com/WILA3j5W371G/?ref=app
10th Apr 2021, 1:09 PM
visph
visph - avatar
+ 1
Yes ofcourse svg will change if it is kept inside some parent div. This can't be explained here so share your code and tell us what exactly you want to do and what's problem.
8th Apr 2021, 6:19 PM
Ayush Kumar
Ayush Kumar - avatar
+ 1
there are roughly two cases: + you try to use many <svg> tags, so you should positionned them as layers (each above others) + you try to use use only one svg tag for all, so you just have to position each at appropriate locations sharing your code would help to get more accurate answer(s) ;P
8th Apr 2021, 11:28 PM
visph
visph - avatar
+ 1
a <svg> tag allow you to write svg code directly inside it (as text, as svg image) a <img> tag load external ressource... either svg, or other supported bitmap formats (png, jpg, gif). https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial however, if you use vector graphics program to make your svg, you could easier use <img> (<svg> require at least some svg language skills, even to be able to import plain text svg done by software)
10th Apr 2021, 4:17 PM
visph
visph - avatar
0
丹ⓨㄩک廾 visph Here is the code I have also included it in the description, sorry for the late reply It took me some time to upload the SVG files. https://code.sololearn.com/WPv1GhapmOn7/?ref=app
10th Apr 2021, 11:47 AM
Uchiha
0
visph thanks you for the advice, I will try out the % method- sounds like what I was looking. Thanks again for always helping me out 😃
10th Apr 2021, 1:37 PM
Uchiha
0
丹ⓨㄩک廾 I will try that thank you
10th Apr 2021, 1:37 PM
Uchiha
0
why not embeding your svg images as <svg> tags rather than using <img> tags? anyway, you should learn how positionning works: 'position:relative' position elements relatively to itself (default auto location -- made by the html elements flow) by keeping the space reserved for them... 'position:absolute' position elements relatively to first positioned ancestor (or <body> if none) without reserving space... that's why you doesn't need to locate your <img>s by using 'relative' on them, and 'absolute' on container, as all your images are already of same size and correctly located relatively each to each others ^^ you should use '%' unit only if you want to position some child elements differently of the saved images ;)
10th Apr 2021, 1:45 PM
visph
visph - avatar
0
visph is there a difference between embedding SVG using <img> and <svg>? The reason why I used relative instead of absolute was because I thought it was the other way round, now that I have changed the position to absolute I realise that the code has been fixed. Thanks for letting me know It was a really silly mistake
10th Apr 2021, 3:48 PM
Uchiha
0
@visph I use corel draw to draw SVG so thats why I used <img> for simplicity's sake
10th Apr 2021, 4:20 PM
Uchiha
0
and is there a reason to export it as many images rather than exporting only one image with full graphics?
10th Apr 2021, 4:23 PM
visph
visph - avatar
0
visph Not really but I wanted to make this character customizable so I guessed that it would be easier to do so with seperate SVG exports
11th Apr 2021, 4:00 PM
Uchiha