css - I encountered a layout problem when writing a page. Please help me solve it. I'm waiting online. Urgent! ~

Question

This is what I want to do p
I have a picture of the hexagon in the middle. I also have a picture of the surrounding balls. I also have a picture of the hexagon and the balls connected together. You can make whatever you want

The key is the requirement: these five small balls are a tags with jump links. The development framework used is bootstrap
I used absolute positioning when writing, and there is no problem if the width is above 1200px
But below 1200px, such as 1199px, the positions of these small balls are deviated

Also, when I used min-width to control them not to change below 1200px, a scroll bar appeared.
But my boss didn’t want me to have a scroll bar when the width was around 1200px... so... .I am confused...

I want to ask if anyone can solve this layout problem

Answer 1

You can try to use image mapping http://www.w3school.com.cn/ta...
You'd better post the code

Answer 2

Use percentages
Use them as separate small pictures
Enclose everything with a p. .
The size can be defined by yourself, based on the screen percentage or using @media. Different screen widths are fixed in px.
The size of the hexagonal image uses a percentage, such as (40%).
The six ball images also use a percentage, such as (20%).