简体   繁体   English

绝对位置元素未隐藏在滚动框外部

[英]Absolute position element not hidden outside of scrollbox

I have some scenarios where I need to have a scrollbar, and I need to have a box popup for multiple purposes, in the example It's just for a name over a photo element. 在某些情况下,我需要有一个滚动条,并且需要有一个框弹出框用于多种用途,在示例中,这只是为了在photo元素上命名。 Is there anyway I can do this? 反正我能做到这一点吗?

Photo example: http://img36.imageshack.us/img36/4696/problemtn.png 图片示例: http//img36.imageshack.us/img36/4696/problemtn.png

As is is how it should work, however I need to have overflow auto as well.. (so uncomment it, then you see my problem): 它是应该如何工作的,但是我也需要自动溢出。(因此,请取消注释,然后您会看到我的问题):

http://jsfiddle.net/kGAPG/ http://jsfiddle.net/kGAPG/

set your popup div at absolute postion and and its parent at relative postion set z-index:1000; 将弹出式div设置为绝对位置,将其父级设置为相对位置设置z-index:1000; to the parent container of the parent of popup and set z-ndex:1001; 到弹出窗口的父级的父级容器,并设置z-ndex:1001; to parent of popup and the set z-index:1002; 到弹出窗口的父级,并设置z-index:1002; to popup. 弹出。 and please next time put your code on the board or at http://jsfiddle.net/ 请下次将您的代码放在开发板上或在http://jsfiddle.net/

this depends on how you have your elements layed out. 这取决于您如何布置元素。 If you are trying to have the tooltips window pop up over the browser's scrollbars, then no, you can't do that (afaik). 如果您试图在浏览器的滚动条上弹出工具提示窗口,则不能,您不能这样做(afaik)。

If you have a div with scrollbars and that div is contained in the middle of the screen, yes you can do that. 如果您有一个带滚动条的div并且该div包含在屏幕中间,是的,您可以这样做。

What you will need to do is create a div at the top level of the document and have its position set to "absolute". 您需要做的是在文档的顶层创建一个div,并将其位置设置为“绝对”。 Then, with jquery, get the position of the picture element you want the box to pop up next to and set the top-level div's top and left style attributes accordingly (remembering to add some for the offset) 然后,使用jquery,获取要在其旁边弹出框的图片元素的位置,并相应地设置顶级div的topleft样式属性(记住为偏移添加一些)

Let me know if that is what you are trying to do! 让我知道您是否正在尝试这样做!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM