Zindex Advanced:
Here are a few things you might want to know
to better understand how zindex internally works.
A source should return a object with a
property, containing the actual data, and
an (optional ;P) options property containing all those
other useful bits of information you’d like to carry on
in your indexing process. Data will be transformed into the Highland Stream,
and options will be added to the usual options fed into every each step.
For example, the Bob source could return something
like:
var result ={ data{id'row_1'},{id'row_2'},..., options{shop'ae'}}
For backends that have multiple data sources, they
can simply return arrays of the above structure; for
example, a more extensive implementation of the Bob source
would return something like:
var results ={ data{id'row_1'},{id'row_2'},..., options{ shop'ae'}},{ data{id'row_1'},{id'row_2'},..., options{shop'sa'}},{ data{id'row_1'},{id'row_2'},..., options{shop'me'}}
Even though sources might return either an array of objects
or a stream, transformers and backends will always receive the data
as a first argument in the form of a ,
and all other informations as :
varbackend=function(data,options){console.log('Got shop?',options.shop);data.filter(function(product){returnproduct.gender==='male';}).map(function(product){returnproduct.sku;}).toArray(function(sku){redis.save('male_skus', skus);});};
As you porbably noticed we always and up having an in our hands,
and this happens asyncronusly even if we’re returning an object.
Under the hood Zindex uses streams and promises to avoid blocking the main thread,
and since it likes them so much it will always try to mangle what you give to it
in one fo the 2 things (or a combination of them).
Indexing can take some options like
and be used within sources / backends to optimize
queries: for example, you could use an option like
to optimize sourcing of your data, to speed
up sync times.
In order to do realtime indexing (a record gets changed and it gets
immediately indexed) we simply rely on RabbitMQ and
process messages that come through:
Demons will need an entity and a priority, so that
they will be able to receive specific updates:
the queues will take the name , for
example .
What the demon does is to simply call the indexer, passing it
the entity and the ID of the update. Then the indexer runs with
the given options; for example, you can customize your
queries using something like:
SELECT*FROMmyDb.products{% if id %}WHERE product_id = {{ id }}{% endif %}
Watchers are what keeps an eye on data changes and
broadcast messages based on the obtained data: as we saw,
realtime indexing will consume messages that come through
RabbitMQ and the watchers are the ones responsible for keeping
an eye on the DB and, as soon as a record gets updated,
send a message to Rabbit.
A watcher provides the method including the
actual logic to watch a . A function
will be provided to the logic in order to broadcast messages.
You can specify an name for the watcher if the
«watcher file» (ie. items.js) has a different name from your entity («items»).
Long story short: when the watcher finds that a record gets updated
it calls which will send a message to Rabbit
watcher example:
module.exports={ entity'products',watchfunction(options,notify){setInterval(function(){ products =db.query('SELECT * FROM products WHERE updated_at < 5000');results.foreach(function(product){notify('product',product.id,);});},5000);};
Once you create a new watcher simply include
it in the directory and
it will be usable via the option on the command line.
~/projects/myIndexer$ ./node_modules/zindex/bin/zindex.js watch -E your_new_watcher_name
All the watchers will run automatically if no is provided.
module.exports={initfunction(templates,options){this.entity=options.name||null;this.templates= templates ||null;this.globOptions=options.globOptions||null;},watchfunction(options,notify){var self =this;notifier.options.priority=;var source =newmySource(options,self.templates,self.globOptions);functiongetNewData(){source.get().then(function(results){_.forEach(results,function(value,key){notifier.notify(key, value);});});}setInterval(function(){logger.debug('Poller:: run ('+self.entity+')');getNewData();},source.interval);}}
Definition and Usage
The property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: only works on positioned elements (position: absolute, position: relative, position: fixed,
or position: sticky) and flex items (elements that are direct children of
display:flex elements).
Note: If two positioned elements overlap without a
specified, the element positioned last in the HTML code will be shown on top.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.zIndex=»-1″ Try it |
Совместимость с браузерами
We’re converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven’t yet converted the data it contains.
- Настольные
- Мобильные
| Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Основная поддержка | 1.0 | 1.0 (1.7 или ранее) | 4.0 | 4.0 | 1.0 |
| Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) | 1.0 | 3.0 (1.9) | 4.0 | 4.0 | 1.0 |
| Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Основная поддержка | ? | ? | ? | ? | ? |
| Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) | ? | ? | ? | ? | ? |
Контекст наложения (stacking context)
При указании CSS position relative z index мы не всегда определяем ее относительно всех остальных элементов на странице. Уровень элемента в стеке отражает лишь его позицию в рамках отдельного контекста наложения.
Это может привести к ситуации, когда элемент с более высоким значением z-index не будет находиться «поверх» элемента с более низким значением.
Контекст наложения можно объяснить следующими правилами:
Исходный контекст наложения заключен в корневом элементе
Исходный контекст наложения в любом HTML-документе заключен в корневом элементе <html>. До тех пор, пока не создано новых контекстов, уровень элемента в стеке будет по умолчанию относиться ко всем элементам на странице.
Создание новых контекстов с указанным свойством z-index
Мы создаем новый контекст наложения с помощью установки любого целого числа в свойстве z-index для элемента. Это дает возможность указать уровень текущего элемента в стеке целым числом, а также создать новый контекст наложения.
Впоследствии новый контекст будет применяться ко всем дочерним элементам данного элемента. Их уровень теперь указывается только в рамках данного контекста, и не относится к корневому элементу.
В приведенном ниже примере .foo относится к контексту наложения 1, а .bar – к контексту наложения 2:
Элементы нельзя располагать выше или ниже уровня родительского
Если у родительского элемента имеется установленный CSS position relative z index, то все дочерние элементы не могут располагаться над или под этим уровнем (в рамках контекста наложения родительского элемента). В приведенном ниже примере, несмотря на то, что у .bar значение z-index выше, чем у .baz, этот элемент все равно расположен “под” ним. Так происходит потому, что в контексте 1 .bar не может располагаться выше или ниже уровня 1.
CSS
.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }
Пожалуйста, оставьте свои комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
Валентин Сейидовавтор-переводчик статьи «How z-index Works»
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
image-rendering
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-modemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index
Zindex 101:
Zindex can be called directly as a runnable command with:
~/projects/myIndexer$ ./node_modules/zindex/bin/zindex.js
or as a normal library by
var zindex =require('zindex');
Zindex by default will look for scripts inside a and a in your project’s directory.
dirsbase'./src'
Will tell to to look for both and watchers under your projects directory
dirsindexers'./foo/index'watchers'./bar/watch'
Will cause to search for inside the directory and for watchers inside
Zindex’ primary role is to be able to sync data
between one data source to N backends.
With bootstrapping we indicate the act of building a backend from scratch.
This commands works only on backends that expose a «bootstrap» function.
If the backend does not have one, it just does nothing.
With Sourcing we indicate the base indexing action:
fetching data from a Source, ie: a mysql table
Zindex will look by default look for indexers in you local folder.
In order to do so, you simply need to create a
directory in your folder with the
entity you want to sync, ie. :
Zindex will read a file that is inside that directory
to source the data that needs to be synced; an example
would look like:
# libindexerproductssource.jsvar shops =include('storages/mysql');var path =require('path');module.exports=function(options){var products =mysql.query('severId','SELECT * FROM db.products');return{ data products, options{myProperty'value'}};};
With Transforming we indicate the actual process of manipulating
your data objects.
At this point, once the data has been extracted from
the source, you might want to apply some transformations,
like renaming a boolean field to or and so on:
to do so zindex will look for a script inside
.
An example would look like:
# indexerproductstransformer.jsfunctiontransform(product,options){ product'in_stock'=!!(product.quantity>);return product;}module.exports=function(products,options){returnproducts.map(function(product){returntransform(product, options);});};
Having an Highland Stream means you can do stuff
like this:
returnproducts.filter(function(product){returnproduct.price>100;}).take(10);
As you see an observable is a simple collection
which you can chunk, filter, etc.
In the example above we are simply filtering
our collection to pick the first ten products
which have a price higher than 100.
Persisting is the last and final step of our indexing process:
here we save the data were they need to be saved!
The data is then fed to what we call «backends»:
Zindex looks for them scripts under
and will send the
data to each one of them so they can be be stored in each
backend; think of your backends as different storage systems:
for example you might want to sync products in a mysql table
and in redis, which means you will create two backends, one called
and the other one called .
If we create a file called under
and write something like:
# indexerproductsbackendsredis.jsvar redis =require('redis')('...','...','...');module.exports=function(data){data.each(funciton(product){redis.execute('HSET','namshi:products', product);});};
We will effectively have setup a sync of the products
from a MySQL table to a redis hash.
Display — когда применять?
Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:
- block
- inline
- none
Наиболее типичные примеры применения свойства display:
- Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
- Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
- Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block
Пример ниже демонстрирует, как свойство display может применяться для изменения ссылок в элементы block.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>
Z-index и контекст наложения
Вышеописанная способность элементов изменять порядок наложения друг на друга с помощью свойства работает лишь в том случае, если эти элементы существуют в одном контексте наложения. Что это значит?
Контекст наложения (англ. stacking context) — это концепция трехмерного размещения HTML-элементов по оси Z, расположенной перпендикулярно экрану. Контекст наложения может быть сформирован любым элементом, который соответствует хотя бы одному из следующих условий:
- Элемент является корневым, т. е. существует в корневом контексте наложения. Любой элемент веб-страницы является таковым, если только он не присутствует в локальном контексте наложения (в том, который создается любым из способов ниже).
- Абсолютно позиционированный (position: absolute) либо относительно позиционированный (position: relative) элемент с любым значением , кроме .
- Элемент со свойством и любым значением .
- Элемент со свойством либо и любым значением , кроме .
- Элемент со свойством и значением менее .
- Элемент с любым значением свойства , кроме .
- Элемент с любым значением свойства , кроме .
- Элемент с любым значением свойства , кроме .
Итак, если соблюдать один из вышеперечисленных пунктов (применить к элементу позиционирование и либо свойство со значением меньше единицы и т. п.), то формируется новый контекст наложения. Внутри контекста наложения дочерние элементы можно перемещать по оси Z в соответствии с обычными правилами.
Контекст наложения может являться частью другого контекста наложения, тем самым создавая своеобразную иерархию контекстов. Если внутри родителя дочерний элемент создает свой собственный контекст наложения, то значения будут учтены в пределах родителя. Элементы, которые не создают свой контекст наложения, используют родительский контекст наложения.
Один контекст наложения является полностью независимым от соседнего контекста. Это означает, что вы не можете, к примеру, наложить дочерний элемент А из одного контекста поверх дочернего элемента Б из другого контекста, если родитель элемента А находится ниже родителя элемента Б (подразумевается, что эти родители являются создателями разных контекстов).
Ниже показан пример того, как родительский элемент создает новый контекст наложения при добавлении к нему свойства , после чего дочерний элемент вновь становится нижним слоем, несмотря на свой :
Это происходит потому, что теперь свойство элемента работает в пределах контекста наложения своего родителя , тогда как другие два блока пока имеют корневой контекст наложения. Каким же образом снова разместить фиолетовый блок выше других, учитывая свойство прозрачности? Для этого необходимо позиционировать все блоки , после чего можно будет установить для них нужный порядок через :
Браузерна сумісність
Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки https://github.com/mdn/browser-compat-data і вишли нам pull request.
Update compatibility data on GitHub
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome Full support 1 |
Edge Full support 12 |
Firefox Full support 1 |
IE Full support 4 |
Opera Full support 4 |
Safari Full support 1 |
WebView Android Full support ≤37 |
Chrome Android Full support 18 |
Firefox Android Full support 4 |
Opera Android Full support 14 |
Safari iOS Full support 1 |
Samsung Internet Android Full support 1.0 |
|
| Negative values |
Chrome Full support 1 |
Edge Full support 12 |
Firefox Full support 3 |
IE Full support 4 |
Opera Full support 4 |
Safari Full support 1 |
WebView Android Full support ≤37 |
Chrome Android Full support 18 |
Firefox Android Full support 4 |
Opera Android Full support 14 |
Safari iOS Full support 1 |
Samsung Internet Android Full support 1.0 |
Приклади
HTML
<div class="dashed-box">Коробка з пунктиром <span class="gold-box">Золота коробка</span> <span class="green-box">Зелена коробка</span> </div>
CSS
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* розташуй .green-box над .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
