日: 2023年2月9日

HTMLで地図を配置したdiv内に画像用divを配置して、CSSで画像用divの位置をセットします。

< コード例 >
HTML
#livemap_photoのsrcはJavascriptでダイナミカリーにセットしています。

<!-- Leaflet伸縮地図 -->
<div id="livemap-container" class="z-depth-1-half map-container p-0">
<!-- 省略 -->
<!-- Planespotter 機材写真 -->
    <figure>
        <div id="livemap_photo_div" class="dsp_none">
            <a id="livemap_photo_a" href="" target="_blank">
                <img id="livemap_photo" src="" width="240" class="border border-primary rounded fade-in"></img>
            </a>
            <figcaption id="livemap_photo_figcap" class="flagcap_dark">..</figcaption>

        </div>
    </figure>
</div>

CSS

positionを absoluteにする
bootom, top, left. right で地図内でのパッディングをセットする
z-indexを地図より大きくする

/* ライブ地図機材写真 */
#livemap_photo_div {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 99999;
    color: white;
    font-size: 14px;
    opacity: 0.8
}

< 画面例 >