Почему этот z-индекс css не работает в моем приложении XUL? - PullRequest
Новая
       2

Почему этот z-индекс css не работает в моем приложении XUL?

4 голосов
/ 06 октября 2010

У меня есть этот файл Xul: 

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://greenfox/content/mycss.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <image class="Front" src="images/loading.gif"/>
    <image class="Back" src="images/plasma.jpg"/>

</window>

с этим CSS (обновлено) : 

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:0;
}

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
}

и, по некоторым причинам, изображения расположены вертикальноодин над другим, а не в z-index, как указано моим CSS.Любая идея, как это исправить?

Обходное решение

В течение некоторого времени я использую новое окно без фона и без границ, и "загрузка" вцентр.

Ответы [ 4 ]

2 голосов
/ 09 октября 2010

редактировать: получил: D без уродливых взломов поля 

<bulletinboard>
    <image src="images/loading.gif" style="top:0px; left:0px; z-index:1"/>
    <image src="images/plasma.jpg" style="top:0px; left:0px; z-index:0"/>
</bulletinboard>

- старое решение ниже -

это похоже на работу: 

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
    width: 200px;
    height: 200px;
    margin-bottom: -200px;
}

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:0;
    width: 200px;
    height: 200px;
}
1 голос
/ 06 октября 2010

Элементы по-прежнему расположены относительно друг друга, вам нужно расположить абсолютно 

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:0;
}

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
}
0 голосов
/ 12 октября 2010

Некоторые реализации механизмов компоновки имеют дело только со строгими положительными значениями для z-индекса.

Просто попробуйте увеличить каждое значение на 1. 

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
}

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:2;
}

Еще одна попытка должна состоять в том, чтобы установить для вашего элемента окна положение: относительное (это еще одна проблема CSS, потому что один элемент должен быть абсолютно позиционирован относительно относительного элемента. Я знаю, что это сбивает с толку, но стоит быстрой попытки).

EDIT: 

window {
position: relative;
}

.Back {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:1;
}

.Front {
    position: absolute;
    left: 0px;
    top:0px;
    z-index:2;
}
0 голосов
/ 12 октября 2010

обычно для абсолютного позиционирования css контейнер элемента также должен иметь положение, не установленное в static;я бы предположил, что xul ничем не отличается, поэтому я предлагаю стилизовать элемент окна, чтобы иметь относительную позицию

...