`

将某个div层显示在最上面(总结)

阅读更多

今天遇到的这个问题,挺奇葩的。客户要求又联想输入(一台服务器支持)。昨天已经做好一部分,今天要做的有些困难,因为现在这个联想列表是弹出来的一层。

大概是这样的,用户点击某个按钮,弹出一个层。然后在这里面点击某个按钮后显示一个input。当用户输入文本的时候,进行联想操作。我用的是jquery 的autocomplete结合jsonp。问题处在了联想列表在弹出层的下面。

因为整个弹出层遮住了下面的内容(jqueryui会在html最后面加入一些内容的。操作这部分内容就可以了),所以用户无法用鼠标点击联想列表里面的内容。在网上搜了一下,大概是这样做 在jqueryui加入的内容上设置他的position,和z-index ,按照网上说的,做了一下。把z-index  设置成1 ,10 ,100 都不行,本以为是做法有问题。但是还是看了看源码,原来上一个同事把弹出的div层的z-index设置成了999了,找到原因了,把z-index设置成1000就好了。刚刚还看了下代码,有个z-index设置成了9999,感觉好高啊。

<div style="position:absolute; left:40%; top:40%; z-index:9999;"

 

分享到:
评论

相关推荐

    div层跨越iframe帧显示在上面的解决方法附代码

    总结来说,解决 `div` 跨越 `iframe` 显示在上面的问题,主要通过调整 `div` 元素的 `z-index` 属性来实现。确保正确设置了 `position` 属性,并根据需要为 `iframe` 的内容进行相应的CSS调整。通过这种方式,可以...

    在iframe 中页面中设置遮罩遮罩层

    在实际应用中,遮罩层通常与弹窗、模态框等组件配合使用,例如在`right.html`, `left.html`, `top.html`中的某个操作触发遮罩层显示,然后在完成特定任务后自动关闭。你可以通过修改JavaScript代码,添加相应的事件...

    单击弹出遮盖层

    遮盖层通常用于创建一个半透明的覆盖层,当用户点击某个元素时,遮盖层会出现在整个页面上,以突出显示特定内容或执行某种操作。下面我们将详细探讨这一技术的相关知识点。 首先,遮盖层的实现往往基于HTML结构,一...

    js 弹出一个层的实例

    // 弹出层显示 document.getElementById('open_popup').addEventListener('click', showPopup); // 设置弹出层停留时间后自动关闭 setTimeout(function() { hidePopup(); }, 5000); // 这里的5000代表5秒 // 关闭...

    41、电商网站jQuery弹出提示层代码

    在上面的代码中,`#show-popup`是触发弹出提示的按钮ID,`#popup-ok`和`#popup-cancel`是用于关闭提示层的按钮ID。`fadeIn()`和`fadeOut()`是jQuery提供的动画方法,用于平滑地显示和隐藏元素。 此外,还可以使用...

    解决layer弹层遮罩挡住窗体的问题

    当使用layer弹层组件时,如果弹出的窗口内容(content)是一个DOM元素,例如一个嵌入在某个div内的对话框,可能会出现遮罩层覆盖在弹窗上的情况,导致用户无法正常操作弹窗内容。这个问题主要是由于遮罩层的DOM元素...

    JS简单实现点击按钮或文字显示遮罩层的方法

    在Web开发中,有时我们需要通过点击按钮或文字来显示一个遮罩层,以覆盖原有页面的内容并添加一些说明或提示信息。这种功能的实现依赖于JavaScript的事件处理机制,以及对HTML元素属性的动态操作。下面将详细介绍...

    java项目学习笔记

    使div层跟随鼠标移动 要让一个div元素随着鼠标移动而移动,可以使用JavaScript监听鼠标事件,并更新div的位置属性: ```javascript div.style.left = event.clientX; div.style.top = event.clientY; ``` 这里的 ...

    bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

    在上面的代码中,我们使用了三个模态框,并将它们嵌套在一起。每个模态框都使用了 tabindex 属性,该属性规定了模态框的 tab 键控制次序。 tabindex 属性 tabindex 属性是 HTML 中的一个属性,用于规定元素的 tab ...

    gmi:使用React的简单网站

    在这个文件里,会导入其他组件,设置应用的初始状态,并将其挂载到DOM树上的某个节点,通常是`&lt;div id="root"&gt;&lt;/div&gt;`。 ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from '....

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持,Spring做管理,管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决...

Global site tag (gtag.js) - Google Analytics