提交 ec747878 编写于 作者: DCloud-yyl's avatar DCloud-yyl

z-index示例页面适配web端的标题栏

上级 a47ac027
<template>
<view style="flex-grow: 1;">
<view>
<view class="common fixed" style="background-color: red;z-index: 10;">
<view class="common fixed default">
<text>position: fixed</text>
<text>z-index: 10</text>
</view>
<view class="common fixed" style="background-color: green;z-index: 5;top: 87px;left: 87px;">
<view class="common fixed specified">
<text>position: fixed</text>
<text>z-index: 5</text>
</view>
......@@ -43,14 +43,29 @@
</script>
<style>
.common {
width: 125px;
height: 125px;
justify-content: center;
align-items: center;
}
.fixed {
position: fixed;
}
.common {
width: 125px;
height: 125px;
justify-content: center;
align-items: center;
}
.fixed {
position: fixed;
}
.default {
background-color: red;
z-index: 10;
top: var(--window-top);
}
.specified {
background-color: green;
z-index: 5;
left: 87px;
/* #ifdef APP */
top: 87px;
/* #endif */
/* #ifdef H5 */
top: calc(var(--window-top) + 87px);
/* #endif */
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册