使用 Z-Index 的层问题 [英] Layers issue using Z-Index

问题描述

我有 2 个控件一个在另一个之上:滑块上的边框.在边框上，用户可以标记一个段以在滑块上以不同的颜色显示.因为边框在xaml 中是写在slider 之后的，所以它出现在slider 的顶部.没关系.我的问题是，滑块的拇指也出现在边框下方.

I've 2 controls one on top of another: border over slider. on border user can mark a segment to appear in different color on slider. Because the border is written after slider in xaml, it appear on top of the slider. and that's ok. My problem is, the Thumb of slider also appears under the border.

如何将 Thumb 元素(属于滑块控件及其内部)设置为显示在所有元素的顶部，并且边框也将显示在滑块的顶部?我尝试使用 zIndex 但没有成功.有什么想法吗?

How can I set the Thumb element (belong to slider control and inside it) to appear on top of all, and also the border will appear on top of the slider? I tried use zIndex but without success. Any idea?

推荐答案

在 CSS 中:

确保您的元素绝对或相对定位.除非元素绝对或相对定位，否则 z-index 并没有真正发挥分层作用.然后你应该可以设置一个:

Make sure your elements are positioned absolutely or relatively. z-index doesn't really have a play in layering unless the elements are positioned absolutely or relatively. You should then be able to set one with:

z-index: 1;

z-index: 1;

另一个是:

z-index: 2;

z-index: 2;

并得到想要的结果.

在 WPF 中:

使用此处

这是一个例子:

确保您的两个元素在同一个父元素中，否则它们将按照加载顺序显示.

Make sure both of your elements are in the same parent, otherwise they will be displayed in the order in which they were loaded.

这篇关于使用 Z-Index 的层问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！