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>