即使瀏覽器在水平和垂直方向上都進行了調整，如何使我的CSS div“粘”在背景圖像上的同一位置？

Question

我本質上是希望div（紅點）在世界地圖上保持相同的位置，因此，我不希望在垂直和水平調整瀏覽器大小時div移動。 我不確定是否需要重點關注div屬性或背景屬性。

以下是我的CSS代碼，也歡迎對我的CSS代碼有任何反饋！ 我是網頁設計的新手，謝謝！ ：

這是我的HTML：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>My World</title>

    </head>

    <body>

        <div id="home" class="home">
            <div id="dallas" class="box, dallas"></div>
            <div id="hongkong" class="box"> </div>
            <div id="capetown" class="box"></div>
            <div id="seoul" class="box"></div>
            <div id="mumbai" class="box"></div>
            <div id="northampton" class="box"></div>
            <div id="sanfrancisco" class="box"></div>
            <div id="newyork" class="box"></div>
        </div>

    </body>

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="interactive.js" type="text/javascript" charset="utf-8"></script>
</html>

還有我的CSS

/*****************
MAIN
******************/
body {
    background: url('worldmap.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;


}

#home {


}

/* Button Design */

.box {
    width: 15px;
    height: 15px;
    background-color: #FE2E64;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 100%;


}


/*****************
HOME BUTTONS (Placement only)
******************/

.home {
    position: relative;
} 

#dallas {
    margin-left: 22.5%;
    margin-top: 7%;

}

#hongkong {
    margin-left: 81.2%;
    margin-top: 1.5%;

}

#capetown {
    margin-left: 55%;
    margin-top: 15%;

}

#seoul {
    margin-left: 85%;
    margin-top: -22.5%;

}

#mumbai {
    margin-left: 69.5%;
    margin-top: 4.5%;
}

}

#northampton {
    margin-left: 29%;
    margin-top: -8.5%;


}

#sanfrancisco{
    margin-left: 15%;
    margin-top: 0%%;

}

#newyork {
    margin-left: 28%;
    margin-top: -2%;
}

/*****************
HOVER 
******************/

#dallas:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#hongkong:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}


#capetown:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#seoul:hover{
    background-color: #F5A9BC;
    cursor: pointer;
}

#mumbai:hover{
    background-color: #F5A9BC;
    cursor: pointer;
}

#northampton:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#sanfrancisco:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#newyork:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

Answer 1

.home { position: relative; }
我認為您必須將其定位：已修復

Answer 2

如果要確保它們完全不動，可以嘗試

position:fixed;

這將在點的css中。 這不會將點移動到頁面上的任何位置。

Answer 3

只需在.home div上設置固定寬度.home 。 范例-

.home{
    width: 720px;
}

即使瀏覽器在水平和垂直方向上都進行了調整，如何使我的CSS div“粘”在背景圖像上的同一位置？

問題描述

3 個解決方案

解決方案1
0 2014-08-04 01:09:16

解決方案2
0 2014-08-04 01:09:32

解決方案3
0 2014-08-04 01:15:58

即使瀏覽器在水平和垂直方向上都進行了調整，如何使我的CSS div“粘”在背景圖像上的同一位置？

問題描述

3 個解決方案

解決方案1 0 2014-08-04 01:09:16

解決方案2 0 2014-08-04 01:09:32

解決方案3 0 2014-08-04 01:15:58

解決方案1
0 2014-08-04 01:09:16

解決方案2
0 2014-08-04 01:09:32

解決方案3
0 2014-08-04 01:15:58