在html 5中,如何将div元素定位在canvas元素的顶部？

Question

任何人都可以帮助我:我试图在html中将一个div(比如10px x 10px)元素放在canvas元素(比如说500px乘500px)的顶部(前面).我试过改变每个的z-index,但没有用.有没有人有任何想法,或者这是你真正做不到的事情之一？我已经知道如何进行绝对定位和一切,div元素只是挂在canvas元素后面的背景中.我需要一种方法将它带到前面,将画布元素带到后面.

谢谢!

Answer 1

绝对定位的工作方式是,通常,代码中较早的元素位于代码中较晚的元素之后.要改变它,你确实使用z-index.但请注意,z-index仅适用于定位的元素.

另一件可能让你失望的事情是所有定位元素都像z-index"容器".因此,如果您<div>恰好在文档中较早并且在另一个定位容器中,它可能被绑定到其祖先的z-index层,因此无法逃脱并显示在其顶部<canvas>.如果是这种情况,您将需要稍微重写CSS或重新排列页面,以便它<div>处于一个好位置.

Answer 2

XHTML

<div id="canvas">
   <div id="topelement">
   </div>
</div>

CSS 样式

#canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }