Пользовательский логотип ArcGIS JavaScript

Question

Я пытаюсь вставить пользовательский логотип для приложения сопоставления ArcGIS. Приложение поставляется с готовым способом загрузить небольшой логотип, который содержится полностью внутри заголовка. Однако я хотел вставить более крупный логотип, который «накладывает» заголовок.

Мне удалось заставить это работать, частично, используя команды абсолютного позиционирования и z-индекса для размещения изображения перед заголовком. Однако, как только я это сделал, название, которое было расположено в центре заголовка, перемещено в крайнее левое положение, а кнопки анализа справа исчезли.

Загрузка шаблона веб-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>