Question

我尝试在z-index中设置div值，但它没有做任何更改。见：

enter image description here

我们可以看到preview content被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>

Answer 1

尝试制作1000.它应该可以工作。

Answer 2

您有定位问题。你有顶部的按钮：110px;这意味着它们的位置：绝对距离顶部110px。你需要制作更多它们才能将它们置于预览之下，如200px;

Answer 3

您应该在原始问题中更具描述性，但要从我想要隐藏的评论中提取并根据预览显示它们。要在你的sylying中执行此操作，请将它们隐藏起来。

    <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元素负责关闭预览并显示两个按钮我可以帮助你编写代码让它们再次显示

编辑：我想我找到了。

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

我假设在这一行你有一个关闭预览的功能。在那里只显示BTN1和BTN2

Div会覆盖另一个div内容

3 个答案: