Javascript 将div固定到图像上，使其成为可选图像

我正试图将div固定在图像上。我遇到的问题是，我希望div能够保持在相同的位置，即使图像被放大或缩小。有人知道我该做什么吗？我有位置：绝对为div，但他们和beacsue的空白，我使用的div不停留在地方，他们应该当图像放大

反应代码：

import React from 'react';

import './map.styles.scss'

import map from '../../assets/MAP.PNG';



export default class NgtiMap extends React.Component {
    constructor() {
        super();

        this.state = {
            selected: 0,
            reserved: [10, 11]
        } 
    }

    render() {
        return(
            <div className="ngti-map">
                <img className="mapImg" src={map} alt="ngti-map"/>
                <div onClick={() =>this.state.reserved.some(item => item === 1) ? null :  this.state.selected === 1 ? this.setState({selected: 0}) : this.setState({selected: 1})} alt="1" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 1) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 1) ? null :this.state.selected === 1 ? 'selected' : ''}`}>{this.state.reserved.some(item => item === 1) ? 'reserved' :'1'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 2) ? null : this.state.selected === 2 ? this.setState({selected: 0}) : this.setState({selected: 2})} alt="2" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 2) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 2) ? null : this.state.selected === 2 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 2) ? 'reserved' :'2'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 3) ? null : this.state.selected === 3 ? this.setState({selected: 0}) : this.setState({selected: 3})} alt="3" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 3) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 3) ? null : this.state.selected === 3 ? 'selected' : ''}`} style={{marginTop: '215px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 3) ? 'reserved' :'3'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 4) ? null : this.state.selected === 4 ? this.setState({selected: 0}) : this.setState({selected: 4})} alt="4" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 4) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 4) ? null : this.state.selected === 4 ? 'selected' : ''}`} style={{marginTop: '300px', marginLeft: '758px', width: '147px', height: '25px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 4) ? 'reserved' :'4'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 5) ? null : this.state.selected === 5 ? this.setState({selected: 0}) : this.setState({selected: 5})} alt="5" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 5) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 5) ? null : this.state.selected === 5 ? 'selected' : ''}`} style={{marginTop: '385px', marginLeft: '758px', width: '147px', height: '24px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 5) ? 'reserved' :'5'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 6) ? null : this.state.selected === 6 ? this.setState({selected: 0}) : this.setState({selected: 6})} alt="6" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 6) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 6) ? null : this.state.selected === 6 ? 'selected' : ''}`} style={{marginTop: '469px', marginLeft: '758px', width: '147px', height: '24px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 6) ? 'reserved' :'6'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 7) ? null : this.state.selected === 7 ? this.setState({selected: 0}) : this.setState({selected: 7})} alt="7" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 7) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 7) ? null : this.state.selected === 7 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '864px', width: '92px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 7) ? 'reserved' :'7'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 8) ? null : this.state.selected === 8 ? this.setState({selected: 0}) : this.setState({selected: 8})} alt="8" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 8) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 8) ? null : this.state.selected === 8 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '956px', width: '92px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 8) ? 'reserved' :'8'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 9) ? null : this.state.selected === 9 ? this.setState({selected: 0}) : this.setState({selected: 9})} alt="9" value="2" className={`zone-to-reserve ${this.state.reserved.some(item => item === 9) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 9) ? null : this.state.selected === 9 ? 'selected' : ''}`} style={{marginTop: '590px', marginLeft: '1048px', width: '125px', height: '8px', padding: '60px 0'}}>{this.state.reserved.some(item => item === 9) ? 'reserved' :'9'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 10) ? null : this.state.selected === 10 ? this.setState({selected: 0}) : this.setState({selected: 10})} alt="10" value="7" className={`zone-to-reserve ${this.state.reserved.some(item => item === 10) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 10) ? null : this.state.selected === 10 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '1001px', width: '87px', height: '28px', padding: '32px 0'}}>{this.state.reserved.some(item => item === 10) ? 'reserved' :'10'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 11) ? null : this.state.selected === 11 ? this.setState({selected: 0}) : this.setState({selected: 11})} alt="11" value="8" className={`zone-to-reserve ${this.state.reserved.some(item => item === 11) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 11) ? null : this.state.selected === 11 ? 'selected' : ''}`} style={{marginTop: '130px', marginLeft: '1140px', width: '169px', height: '31px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 11) ? 'reserved' :'11'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 12) ? null : this.state.selected === 12 ? this.setState({selected: 0}) : this.setState({selected: 12})} alt="12" value="4" className={`zone-to-reserve ${this.state.reserved.some(item => item === 12) ? 'reserved' : ''} ${ this.state.reserved.some(item => item === 12) ? null : this.state.selected === 12 ? 'selected' : ''}`} style={{marginTop: '340px', marginLeft: '957px', width: '130px', height: '23px', padding: '40px 0'}}>{this.state.reserved.some(item => item === 12) ? 'reserved' :'12'}</div>
                <div onClick={() => this.state.reserved.some(item => item === 13) ? null : this.state.selected === 13 ? this.setState({selected: 0}) : this.setState({selected: 13})} alt="13" value="3" className={`zone-to-reserve ${this.state.reserved.some(item => item === 13) ? 'reserved' : ''} ${this.state.reserved.some(item => item === 13) ? null : this.state.selected === 13 ? 'selected' : ''}`} style={{marginTop: '351px', marginLeft: '1142px', width: '96px', height: '20px', padding: '30px 0'}}>{this.state.reserved.some(item => item === 13) ? 'reserved' :'13'}</div>
            </div>
        );
    }
}

---

嗨Kacper，欢迎来到SO！这个问题还不够清楚。首先：“我有位置：绝对位置，但他们和保证金…”-但他们*什么*？你能把这整句话改清楚吗？还有，你说的这个“缩放”是什么？我在你的代码中没有看到任何“缩放”。代码示例是否真的需要13个相同的

div

s，或者问题是否只需要一个就可以重现？最后，你能用一个工作示例来介绍stackblitz/fiddle等吗？使用相对于图像大小的百分比而不是像素来定位元素。

.ngti-map {
    .mapImg {
        position: absolute;
        width: 80%;
        margin: 0 auto;
    }

    .zone-to-reserve {
        position: absolute;
        margin-top: 603px;
        margin-left: 149px;
        width: 92px;
        height: 31px;
        background-color: green;
        opacity: 50%;
        color: transparent;
        text-align: center;
        padding: 40px 0;
        font-weight: bold;

        &:hover {
            opacity: 80%;
            color: black;
        }

        &.selected {
            opacity: 90%;
            color: black;
        }
    }
    .reserved {
        background-color: grey;
        opacity: 90%;
        color: transparent;
        text-align: center;
        padding: 45px 0;

        &:hover {
            color: black;
            opacity: 90%;
        }
    }
}