ArcGIS JavaScript自定義徽標

Question

我正在嘗試爲ArcGIS地圖應用插入自定義徽標。該應用程序提供了一種開箱即用的方式來上傳完全包含在標題中的小徽標。不過，我想插入一個更大的標識，用於覆蓋標題。

我能夠通過使用絕對定位和z-index命令將圖像放在標題的前面，從而部分解決了這個問題。但是，一旦我這樣做，位於標題中心的標題移動到最左側，右側的分析按鈕消失。

Web AppBuilder模板下載包含多個html，.js，.json和.css文件。我使用index.html文件來放置徽標。

一旦我在.html文件中插入徽標，爲什麼標題移動到左側並且分析工具按鈕從標題消失的任何想法？我是否應該將徽標插入其他文件？

謝謝。從index.html文件

示例代碼：

 <!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href="jimu.js/css/jimu-ie.css" /> 
<![endif]--> 
    <style type="text/css"> 
    img { 
     position: absolute; 
     left: 0px; 
     top: 0px; 
     z-index: 3; 
     } 
    *{box-sizing: border-box;} 
     body,html { 
      width:100%; 
      height:100%; 
      margin:0; 
      padding:0; 
      overflow:hidden; 
     } 
     #main-loading{ 
      width: 100%; 
      height: 100%; 
      background-color: #2E3F60; 
      text-align: center; 
      overflow: hidden; 
     } 
     #main-loading #app-loading, #main-loading #ie-note{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    } 
    #main-loading #app-loading{ 
    width: 100%; 
    height: 100px; 
    } 
    #main-loading .app-name{ 
    font: 36px arial; 
    font-weight: bold; 
    position: absolute; 
    z-index: 2; 
    } 
     #main-loading img{ 
      position: relative; 
      display: block; 
      margin: auto; 
     } 
     #main-loading .loading-info{ 
      font: 14px 'arial'; 
      margin-top: 50px; 
      overflow: hidden; 
      position: relative; 
     } 
     #main-loading .loading-info .loading{ 
      width: 260px; 
      height: 4px; 
      border-radius: 2px; 
      background-color: #15203B; 
      margin: auto; 
     } 
     #main-loading .loading-info .loading-progress{ 
      height: 4px; 
      border-radius: 2px; 
      background-color: #ABB2BF; 
     } 
     #main-loading #ie-note { 
    width: 586px; 
    height: 253px; 
    background-image: url('images/notes.png'); 
    padding: 0 30px 40px 30px; 
    font-size: 14px; 
    color: #596679; 
    } 
    #ie-note .hint-title{ 
    height: 40px; 
    line-height: 48px; 
    text-align: left; 
    font-weight: bold; 
    } 
    #ie-note .hint-img{ 
    background-image: url('images/hint.png'); 
    background-position: left; 
    padding-left: 40px; 
    margin-top: 20px; 
    background-repeat: no-repeat; 
    height: 30px; 
    text-align: left; 
    line-height: 30px; 
    font-weight: bold; 
    } 
    #ie-note span{ 
    display: block; 
    line-height: 14px; 
    } 
     #main-page{ 
      display: none; 
      width: 100%; 
      height: 100%; 
      position: relative; 
     } 

     #jimu-layout-manager{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
     } 
    </style> 

Answer 1

這是因爲你使用絕對定位，現在有沒有什麼是「推」的文字的權利。只需在標題文本元素上放置正確的邊距，就可以了。

看到這個：

img {height: 60px;} 
 
span {height: 60px;display: inline-block;} 
 
#p {position:absolute;} 
 
#o {margin-left: 30px;}

<img src="http://www.mariogame.info/images/icon-facebook.png" id="p" /><span>Absolutely positioned</span> 
 
<hr /> 
 
<img src="http://www.mariogame.info/images/icon-facebook.png" /><span>Normally positioned</span> 
 
<hr /> 
 
<img src="http://www.mariogame.info/images/icon-facebook.png" /><span id="o">Absolutely positioned - text offset</span>