我能用z-index隐藏相对推进的div吗？ [英] Can I hide relatively proistioned divs with z-index?
问题描述
有没有办法解决隐藏的div创建的空白？我是
试图使用具有显示/隐藏行为的相对位置的div来
注释图像。 div显示/隐藏onMouseOver / onMouseOut但在隐藏时会在页面上留下一个
的空白区域（div通常为
的空间）。是否可以使用z-indexing将常规内容放在
隐藏div的位置？当我尝试这样做时，这些图层不会隐藏，因为他们应该这样做。当相对
定位的div嵌套时，JavaScript会搞砸吗？或者还有其他一些原因，为什么当嵌套在具有更高z-index的div中时，该层不会被隐藏？
deko写道：有没有办法解决隐藏的divs创建的空白？我正在尝试使用具有显示/隐藏行为的相对位置的div来对图像进行注释。 div显示/隐藏onMouseOver / onMouseOut但隐藏时会在页面上留下一个
空白区域（div通常是这样的空间）。
静态和亲属是正常流量，因此占用了真正的b
。浮动元素不在正常流程中，绝对和
固定且不占用任何房地产。
是否可以使用z-indexing来放置定期内容
隐藏的div会是什么？当我尝试这样做时，这些图层不会像他们应该隐藏的那样。当相对
定位的div嵌套时，JavaScript会搞砸吗？或者是否有其他原因导致当嵌套在具有更高z-index的div中时，该层不会取消隐藏？
无需使用z-index，只需使用绝对定位DIV
Annotate / Popup。这里有一些代码供您评估。放置你的文字或
图像，在鼠标悬停时调用注释/弹出窗口，如下所示：
< a href ="" ; onclick =" return false" onMouseOver =" show（''firstDiv''）"
onMouseOut =" hide（''firstDiv''）" style =" text-decoration：none;">
< div>
a正文或图片
（图片不需要在DIV中。如果文本不在
DIV中，那么mouseOver将仅严格地在文本部分工作。）
< / div>
< / a>
然后创建您的注释/弹出窗口，例如：
< ！ - Popup Portions - >
< div id =" firstDiv"风格= QUOT;位置：绝对的;顶：250像素;左：390px;
宽度：350px;颜色：黑色; FONT-FAMILY：无衬线;背景：＃E6E6F3;
border：.25em solid＃336699;填充：0 5px 0 5px; visibility：hidden;">
这1< sup> st< / sup> DIV是< u>绝对模型< / u>顶部和左侧的定位
相对于包含
块的左上角 - 在这种情况下是一个与BODY具有相同顶部和左侧的DIV
（视口）。
< pre>
位置：绝对值;
border：.25em solid＃336699 ;
宽度：350px;
顶部：250px;
左：390px;
填充：0 5px 0 5px;
可见性：隐藏;
< / pre>
< / div>
当然，您可能希望将样式移到样式表中。
-
Gus
>静态和相对属于正常流程，因此占用了真正的属性。 Floated元素不在正常流程中，Absolute和
Fixed也不会占用任何空间。
10-4。这是有道理的。
不需要使用z-index，只需使用绝对定位DIV来注释/弹出。这里有一些代码供您评估。放置你的文字或
图片，在鼠标悬停时调用注释/弹出窗口，在
之类的链接中如此：
我正在使用Dreamweaver，它生成JavaScript对我来说，但我明白
你在暗示什么。问题是适应不同的屏幕
分辨率 - 如果用户正在以不同的分辨率查看
，则div显示在错误的位置。您可以在
http://www.clearpointsystems.com查看测试版页面。 /software02.php - 点击页面顶部的组织XP
图标，您将进入命名锚点（
下图）。您会注意到
页面的顶部与图像之间存在很大差距，这正是我想要摆脱的，或者以某种方式解决
。我有一个显示/隐藏行为 - 鼠标悬停在图像左侧的垂直
堆栈按钮上。您会注意到图像中其他几个区域的交换图像
行为 - 每个区域都需要附加到相应热点的
显示/隐藏div行为。
所以，我的想法（在我原来的帖子中建议）是我可以把
图像上方的内容放在一个（相对定位的）图层上面
隐藏的div，从而回收他们消耗的空间。我有这个问题，而且我不确定这是否可行 - 我是不是想错了树？
我试过的另一个选择是把隐藏的div在图像下面只是
留下尾随空格 - 但我又遇到了麻烦 - 是否有可能
将div放在图像之后？或者这违反了文件流程
要求？
当然，您可能希望将样式移到样式表中。
是的，这里有几个div的样本（总共大约有30个） - 我已经给了b
给出了不同的z-index。不确定是否真的有必要...
#quickSearch {
职位：亲属;
左：-960px;
顶部：550px;
宽度：371px;
身高：190px;
z-index：1001;
font-family：Verdana，Arial，Helvetica，sans-serif;
font-size：11px;
border：1px solid＃000000 ;
填充：15px 15px 13px 15px;
背景颜色：#FFFFCC;
可见性：隐藏;
}
#apptStatus {
职位：亲属;
剩余：0px;
top ：-300px;
宽度：371px;
身高：190px;
z-index：1002;
font-family：Verdana，Arial，Helvetica，sans-serif;
font-size：11px;
border：1px solid＃000000;
填充：15px 15px 13px 15px;
背景颜色：#FFFFCC;
可见性：隐藏;
}
#txStatus {
职位：相对;
剩余：200px;
top ：-250px;
宽度：371px;
身高：190px;
z-index：1003;
font-family：Verdana，Arial，Helvetica，sans-serif;
font-size：11px;
border：1px solid＃000000;
填充：15px 15px 13px 15px;
背景颜色：#FFFFCC;
可见性：隐藏;
}
#actionButtons {
位置：相对;
左：-100px;
顶部：300px;
宽度：371px;
身高：190px;
z-index：1004;
font-family：Verdana，Arial， Helvetica，sans-serif;
字体大小：11px;
border：1px solid＃000000;
填充：15px 15px 13px 15px;
背景颜色：#FFFFCC;
可见性：隐藏;
}
谢谢你你的回复！
作为我上一篇文章的后续内容，这个页面将是一个更好的例子：
http://www.clearpointsystems.com/software08.php
div在加载时可见以进行测试。将鼠标移到图像周围后，你会看到div隐藏起来。我还没有在样式表中为每个div设置
的坐标，但是当我完成时它们都将在图像区域内。
。然而，他们占用的空间是房地产我不想放弃。我假设即使我设置了坐标后，
div仍会占据图像上方的空间？
Is there any way to work around the blank space created by hidden divs? I''m
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be). Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don''t unhide as
they should. Does the JavaScript get screwed up when the relatively
positioned div is nested? Or is there some other reason why the layer won''t
unhide when nested in a div with a higher z-index?
deko wrote:Is there any way to work around the blank space created by hidden divs? I''m
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be).
Static and Relative are in the normal flow and therefore take up real
estate. A Floated element is out of the normal flow, as are Absolute and
Fixed and do not take up any real estate.
Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don''t unhide as
they should. Does the JavaScript get screwed up when the relatively
positioned div is nested? Or is there some other reason why the layer won''t
unhide when nested in a div with a higher z-index?
No need to use z-index, simply use an Absolute positioned DIV to
Annotate/Popup. Here''s some code for you to evaluate. Place your text or
image, to call an annotation/popup when moused over, inside a link like so:
<a href="" onclick="return false" onMouseOver="show(''firstDiv'')"
onMouseOut="hide(''firstDiv'')" style="text-decoration:none;">
<div>
a body of text or image
(The image does not need to be in a DIV. If the text is not inside a
DIV, then the mouseOver will work strictly only on the text portion.)
</div>
</a>
Then create your annotation/popup such as:
<!-- Popup Portions -->
<div id="firstDiv" style="position:absolute; top:250px; left:390px;
width:350px; color:black; font-family:sans-serif; background:#E6E6F3;
border:.25em solid #336699; padding:0 5px 0 5px; visibility:hidden;">
This 1<sup>st</sup> DIV is <u>Absolute Model</u> where the positioning
of top and left are relative to the top left corner of the containing
block - in this case a DIV which has the same top and left as BODY
(viewport).
<pre>
position : absolute;
border : .25em solid #336699;
width : 350px;
top : 250px;
left : 390px;
padding : 0 5px 0 5px;
visibility : hidden;
</pre>
</div>
Of course, you may wish to move the styles into a stylesheet.
--
Gus
> Static and Relative are in the normal flow and therefore take up realestate. A Floated element is out of the normal flow, as are Absolute and
Fixed and do not take up any real estate.
10-4. That makes sense.
No need to use z-index, simply use an Absolute positioned DIV to
Annotate/Popup. Here''s some code for you to evaluate. Place your text or
image, to call an annotation/popup when moused over, inside a link like so:
I am using Dreamweaver, which generates JavaScript for me, but I understand
what you are suggesting. The problem is accommodating different screen
resolutions - the divs show up in the wrong place if user is viewing with
different resolution. You can view a beta page at
http://www.clearpointsystems.com/software02.php - click on the "Organize XP"
icon on the top of the page and you will be taken to a named anchor (with
the image below). You will notice a big gap between the top section of the
page and the image, which is what I''m trying to get rid of, or work around
somehow. I have one show/hide behavior working - mouse over the vertical
stack of buttons on the left side of the image. You will notice swap image
behaviors on several other areas in the image - each one needs to have a
show/hide div behavior attached to the corresponding hotspot.
So, what I was thinking (suggested in my original post) is that I could put
the content above the image in a (relatively positioned) layer on top of the
hidden divs, thus reclaiming the space they consume. I had trouble with
this and I''m not sure if this is possible - am I barking up the wrong tree?
Another option I tried is putting the hidden divs below the image and just
leaving the trailing blank space - but again I had trouble - is it possible
to put the divs after the image? Or is this in violation of document flow
requirements ?
Of course, you may wish to move the styles into a stylesheet.
Yes, here is a sample of a few of the divs (there are about 30 total) - I''ve
given each one a different z-index. Not sure if that is really necessary...
#quickSearch {
position:relative;
left:-960px;
top:550px;
width:371px;
height:190px;
z-index:1001;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}
#apptStatus {
position:relative;
left:0px;
top:-300px;
width:371px;
height:190px;
z-index:1002;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}
#txStatus {
position:relative;
left:200px;
top:-250px;
width:371px;
height:190px;
z-index:1003;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}
#actionButtons {
position:relative;
left:-100px;
top:300px;
width:371px;
height:190px;
z-index:1004;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}
Thanks for your reply!
As a follow up to my previous post, this page will is a better example:
http://www.clearpointsystems.com/software08.php
The divs are visible on load for testing. After mousing around the image,
you will see the divs hide themselves. I have not set the coordinates for
each div in the style sheet yet, but they will all be within the image area
when I''m done. Nevertheless, the space they occupy on load is real estate I
don''t want to give up. I assume that even after I set the coordinates, the
divs will still occupy space above the image?
这篇关于我能用z-index隐藏相对推进的div吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
