Div перезаписывает другое содержимое div

Я пробовал с установкой значений z-index в div, но он не вносит никаких изменений. см:Div перезаписывает другое содержимое div

enter image description here

Как мы можем видеть preview content является overwridden с помощью кнопок, которые находятся в div теге. Значение z-index в div, у которого есть эта кнопка 1. Я попытался сделать это 2,3 и -1 для div, который показывает превью. Но никаких изменений?

Нужны ли какие-либо другие изменения?

Вот мой HTML-код:

<body style="height: 560px"> 
    <div > 
    <form action="data.php" method="POST" onsubmit="showUser(this, event)"> 
      <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">   
       <label>Enter URL:</label><br/> 
      </div> 

    <div style=" width: 15%;margin: auto;margin-top: 1px;text-decoration: none;text-shadow: 0 1px 0 #fff; padding: 10px 20px; text-align: justify; "> 

    <!-- This div linkpreview shows div preview --> 

    <div class="linkPreview" style="z-index: 2;"> 

       <div id="previewLoading"></div> 
       <div style="float: left;"> 
        <textarea type="text" id="text" style="text-align: left; height:35px; width:512px; " placeholder="What's in your mind"/> 
        </textarea> 
        <div style="clear: both"></div> 
       </div> 
       <div id="preview" style="z-index: -1;"> 
        <div id="previewImages"> 
         <div id="previewImage"><img src="img/loader.gif" style="margin-left: 43%; margin-top: 39%;" ></img> 
         </div> 
         <input type="hidden" id="photoNumber" value="0" /> 
        </div> 
        <div id="previewContent"> 
         <div id="closePreview" title="Remove" ></div> 
         <div id="previewTitle"></div> 
         <div id="previewUrl"></div> 
         <div id="previewDescription"></div> 
         <div id="hiddenDescription"></div> 
         <div id="previewButtons" > 
          <div id="previewPreviousImg" class="buttonLeftDeactive" ></div><div id="previewNextImg" class="buttonRightDeactive" ></div> 
          <div class="photoNumbers" ></div> 
          <div class="chooseThumbnail"> 
           Choose a thumbnail 
          </div> 
         </div> 
         <input type="checkbox" id="noThumb" class="noThumbCb" /> 
         <div class="nT" > 
          <span id="noThumbDiv" >No thumbnail</span> 
         </div> 
        </div> 
        <div style="clear: both"></div> 
       </div> 
       <div style="clear: both"></div> 
       <div id="postPreview"> 
       </div> 
       <div class="previewPostedList"></div> 
      </div> 
     </div> 
     <div style="z-index: 1; left: 420px; top: 110px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('t1').value)" > <button onclick="show2();"> Get Sentiment </button>  
      </div> 
     </form> 
     <div style="z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px"> 
      <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button> 
     </div> 
     </div> 
     <h4> 

     </body>

источник

2013-10-09 Anonymous

Можете ли вы создать скрипку или предоставить код, который позволит воспроизвести проблему? –

Im confused ... Как именно вы хотите, чтобы эти две кнопки отображались? Ниже 'preview content 'или под ними? – Kierchon

Кроме того, как вы хотите, чтобы это произошло? Чтобы переместить кнопки вниз или просто предварительный просмотр появляется поверх этих кнопок? –

Попробуйте сделать это 1000. Он должен работать тогда.

источник

2013-10-09 19:35:38 Andy897

Я не в настроении подшучивать! –

Я был серьезен :(.. Я имею в виду это. Не могли бы вы попробовать один раз – Andy897

Никакой логики! Без изменений! –

У вас проблема с позиционированием. У вас есть кнопки сверху: 110px; что означает, что они имеют положение: абсолютное от вершины до 110 пикселей. Вы должны сделать их более того, чтобы помещать их под предварительный просмотр, например 200px;

источник

2013-10-09 19:45:21 Keith

В этом случае кнопки будут двигаться вниз. Я не хочу их менять, Предварительный просмотр отображается только на несколько секунд. Когда пользователь нажмет кнопку закрытия, он исчезнет. Поэтому, когда пользователь вводит url в поле в этом экземпляре, только я хочу, чтобы предварительный просмотр отображался поверх этих кнопок. Кнопки не нужно переставлять –

Вы можете написать простой javascript и заставить их затухать или скрыть/показать css – Keith

Вы должны быть более наглядными в своем оригинальном вопросе, но из того, что я выбрал из ваших комментариев, которые вы хотите скрыть, и показать их на основе предварительного просмотра. Для этого в вашем сиинге сделать их скрытыми.

<div id="BTN1" style="display:none; z-index: 1; left: 420px; top: 110px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('t1').value)" > 
     <button onclick="show2();"> Get Sentiment </button>  
    </div> 
    </form> 
    <div id="BTN2" style="display:none; z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px"> 
     <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button> 
    </div>

Затем при нажатии на кнопку рядом с предварительного просмотра вы можете сделать BTN1 и BTN2 показать снова. Если вы сообщите мне, какой элемент html отвечает за закрытие предварительного просмотра, и покажут две кнопки, я могу помочь вам написать код для их повторного отображения.

EDIT: Я думаю, что нашел.

<div id="closePreview" title="Remove" ></div>

Im предполагая, на этой линии, у вас есть функция, которая закрывает окно предварительного просмотра. Там просто показаны BTN1 и BTN2

источник

2013-10-09 19:53:48 Kierchon

Да, правильно. LEt меня проверить это –

Хорошо, дайте мне знать. Я предполагаю, что вы знаете, как показать div снова – Kierchon

Div перезаписывает другое содержимое div

ответ

Смежные вопросы