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
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 ;)
+ 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
+ 2
and more simplified version (ordering inside html):
https://code.sololearn.com/WILA3j5W371G/?ref=app
+ 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.
+ 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
+ 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)
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
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 😃
0
丹ⓨㄩک廾 I will try that thank you
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 ;)
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
0
@visph I use corel draw to draw SVG so thats why I used <img> for simplicity's sake
0
and is there a reason to export it as many images rather than exporting only one image with full graphics?
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
Often have questions like this?
Learn more efficiently, for free:
Hot today
Sticky position
3 Votes
Help please?
3 Votes
Ejercicio Pytho
0 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes