如何将静态div放在绝对位置div的顶部?

编程入门 行业动态 更新时间:2024-10-27 14:32:46
本文介绍了如何将静态div放在绝对位置div的顶部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我正在建立一个小型的网路应用程式。 我有两个div。一个是绝对的,另一个是静态的。 我试图将我的静态div放在我绝对的顶部,所以它仍然是最上面的项目。

非常简单代码示例:

jsbin/efuxe3/edit

如何做到这一点?

编辑:我一直在使用z-index。它似乎没有效果。

解决方案

z-index //reference.sitepoint/css/z-index\">此页:

此属性指定堆栈$位置值为的框的b $ b级别绝对,固定或相对。

code>,而是可以使用 z-index 来确定顺序。

position:relative 定位元素相对于其默认(静态)位置,因此如果不指定顶部,底部,左侧或右侧,则 static 和相对之间没有区别您可以使用 z-index 将元素向上移动。

编辑:根据您的代码示例, 这是一个有效的演示 。

编辑2:根据Nathan D. Ryan在下面的评论中的建议,您还可以应用一个否定的 z-index 到你绝对定位的div。这会将它移动到没有定义的 z-index 的页面上的一切。

I am building a small web application. I have two divs. One is absolute and the other is static. I am trying to position my static div on top of my absolute one, so that it remains the top most item.

Very simple Code Sample:

jsbin/efuxe3/edit

How can this be done?

Edit: I have been using z-index. It seems to have no effect.

解决方案

z-index doesn't apply to static elements.

According to this page:

This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

If you make your div relative instead, you can use z-index to determine the order.

position: relative positions the element relative to its default (static) position, so if you don't specify a top, bottom, left or right then there'll be no difference between static and relative other than that relative allows you to use z-index to move your element up the stack.

Edit: based on your code sample, here's a working demo.

Edit 2: based on Nathan D. Ryan's suggestion in the comments below, you could also apply a negative z-index to your absolutely-positioned div. This would move it behind everything else on the page that didn't have a lower z-index defined.

更多推荐

如何将静态div放在绝对位置div的顶部?

本文发布于:2023-10-08 04:35:39,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:放在   如何将   静态   位置   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!