Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?

I put an image on the page to cover 3/4 the browser width (per design). The image is inside a parent <div> with position relative. Also within that div is a container <div class="pins-wrapper"> that I put a few 'pin' elements as <i> elements with display:block; ... here are some snippets:
<map-holder><img src="/map-image.png" alt="Its a map!" />
<div class="pins-wrapper">
<i id="pin1" class="material-icons">place</i>
<i id="pin2" class="material-icons">place</i>
<i id="pin3" class="material-icons">place</i>
</div>
</map-holder>
<map-holder><img src="/map-image.png" alt="Its a map!" />
<div class="pins-wrapper">
<i id="pin1" class="material-icons">place</i>
<i id="pin2" class="material-icons">place</i>
<i id="pin3" class="material-icons">place</i>
</div>
</map-holder>
map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }
map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }
The container for the pins is edge-anchored to the container holding the map image which is full-sized to that container. When the browser width changes, the precision placed pins creep off their target points so they no longer align to the map behind them. The creep is significant (15px) when the browser width changes from, say, 1400px wide to 1600px wide. Those pins should NOT creep at all due to all the anchoring!! What is causing them to malign?? I need those pins to remain stable above their respective targets no matter what width the browser has. Thanks for any help offered!
J
Jochem12d ago
it's really hard to figure this stuff out without being able to see it in your own browser. Can you share a live version, or ideally a minimal reproduction in codepen or something similar? I don't know if I'll have time today, but it usually helps others help you if there's something to click and poke around in the dev tools with
P
ProdJuan11d ago
here's a pen: https://codepen.io/prodjuan/full/WNWMENO - resize the window larger/smaller width, and you'll see the pins shifting around. I need solid stable anchors for what I'm doing. This isn't working for that. Thanks!
M
MarkBoots11d ago
it is because your icons have a fixed size and are positioned from the top left corner, translate them to the center of the position by adding transform: translate(-50%, -50%) (maybe you want the second value to be -100% so the bottom of the pin lines up to the position you want)
M
Mannix11d ago
I fell using clamp on the font-size could fix this issue but i'm not sure changing 48px to clamp(16px, 5vw, 64px) seems to work but is not pixel perfect
P
ProdJuan11d ago
what would transform-origin do in this case? I put transform translate on all the icons, adjusted offset for first pin... all 5 pins adjusted, pen saved, should be current now project spec calls for 'large pins' so they are fixed size by design.
M
MarkBoots11d ago
in this case not much as you are only translating. it would be different if you rotate, skew or scale that's okay, the translate works on the size of the element. so if you translate with a percentage, the size doesn't matter
P
ProdJuan11d ago
I added a few more container elements to the pen to better resemble the actual case on my page.
M
MarkBoots11d ago
yea, thats seems okay. maybe it's a bit too much for you now, but if you you want, you can make it yourself a bit easier by using some calculations which make it easier to position the markers https://codepen.io/MarkBoots/pen/OJGQQbE (i didn't use an image as the background, but gradients to create the grid, but you can keep it as you like)
P
ProdJuan11d ago
latest has upper/lower container, grid-item height set by css to scale with browser width. so those pins actually land on/over a map image (an image is an image), so that's the basis for using an image of a grid rather than CSS-constructed lines/boxes. nifty css-block making those boxes though! Mark, If I wanted to use 'right/bottom' as the means to position the pin icons, how would I adjust the transform so that they would be as stable as they are using the left/top in CSS? @MarkBoots I updated the codepen to have the first icon positioned using right/bottom properties and you can see how it creeps around while the others are stable.
M
MarkBoots11d ago
can not see it updated. but if you position it from the right bottom, you'll need to translate it 50% to the right to get it into the middle of that point. the bottom should be good so translate(50%, 0%)
#pin01 { right: 74.5%; bottom: 69%; transform:translate(50%,0%)}
#pin01 { right: 74.5%; bottom: 69%; transform:translate(50%,0%)}
P
ProdJuan11d ago
ok, sorry, just hit save button in codepen for it. (the orange pin is the one that used to be from top left)
M
MarkBoots11d ago
this is kinda what is done the pin is placed with the bottom and right position (blue dot), to get it to the center, translate it half the width
No description
P
ProdJuan11d ago
ok, the orange pin in top left is positioned using bottom/right with the translate(50%,0%). Is it holding stable for you as width changes? at 64px tall, those pin icons .... the bottom tip isn't at the zero line, it's up a few px from the bottom. that might account for some vertical shifting.
M
MarkBoots11d ago
that is because the actual bounding box is a bit larger than the icon itself. don't think there is much you can do about that
No description
M
MarkBoots11d ago
you could try adjusting the line height a bit, something like line-height: 0.8
P
ProdJuan11d ago
well, I was thinking something like transform(-50%,calc(-100% + 4px)) the premise being: try and match the position top/left (bottom/right) to the tip of the pin as close as can be done.
Want results from more Discord servers?
Add your server
More Posts
is this button too muchhttps://svgzip.com/ would love some general design feedback. I feel like I maybe went a bit overboarPseudo Selector Solution?I feel silly for asking this, but I'm currently trying to target something on a social site that allCarousel-style pagination with Modals.Hello everyone! I saw this site https://lk.zont-online.ru/demo#/. When you click the first card, youImg or Svg element?Say you have a Figma where the designer have created icons and such. Do you prefer to export them toElement for <slot>?Is it possible to not pass a wrapper element to a `<slot />`? It looks like I have to use a wrapper overflow while body does not have an heightwhy i am facing overflow problem but when i give body height of 100vh the overflow goes awayDoing responsive text by using media queries on :root to change the font size for smaller screens.While trying to figure out a good way to do responsive text without manually setting font size usingHow to fix this snap dynamic horizontall scroll effect?I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTColor pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few day