console 命令行工具 X clear

console

(function() {
    let old = "";
    let dom = $(".container");
    
    $('#select').on("change", function(e) {
        let current = $(this).val();
        dom.removeClass(old).addClass(current);
        old = current;
    });
})();

<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
  <div class="container"> 
    <div class="fixed"></div>
  </div>

<h1 class="title">触发父元素生成层叠上下文的方式: 
    <select id="select">
        <option value="g-empty">none</option>
        <option value="g-absolute">z-index 值不为 "auto"的 绝对/相对定位</option>
        <option value="g-flex">一个 z-index 值不为 "auto"的 flex 项目 (flex item)</option>
        <option value="g-opacity">opacity 属性值小于 1 的元素</option>
        <option value="g-transform">transform 属性值不为 "none"的元素</option>
        <option value="g-blend">mix-blend-mode 属性值不为 "normal"的元素</option>
        <option value="g-filter">filter值不为“none”的元素</option>
        <option value="g-perspective">perspective值不为“none”的元素</option>
        <option value="g-isolation">isolation 属性被设置为 "isolate"的元素</option>
        <option value="g-fixed">position: fixed</option>
        <option value="g-willChange">在 will-change 中指定了任意 CSS 属性</option>
        <option value="g-scrolling">-webkit-overflow-scrolling 属性被设置 "touch"的元素</option>
        <option value="g-preserve3d">设置了 transform-style: preserve-3d 的元素</option>
    </select>
</h1>

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 10vh;
    line-height: 10vh;
    color: #333;
    font-size: 1.5vw;
}

select {
    height: 10vh;
    line-height: 10vh;
    font-size: 1vw;
    outline: none;
    border: 1px solid #333;
}

.container {
    width:10vw;
    height: 10vw;
    //transform: translate3d(5vw, 5vw, 0);
    //will-change: transform;
    background: rgba(255, 100, 100, .8);
    //position:relative;
    //position: fixed;
}

.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

.g-absolute {
    position: absolute;
    z-index: 10;
}

.g-flex {
    display: flex;
    z-index: 10;
}

.g-opacity {
    opacity: .5;
}

.g-transform {
    transform: translate3d(0, 0, 0);
    //transform: scale(1);
}

.g-blend {
    mix-blend-mode: screen;
}

.g-filter {
    filter: blur(5px);
}

.g-perspective {
    perspective: 1000px;
}

.g-isolation{
    isolation: isolate;
}

.g-fixed {
    position: fixed;
}

.g-willChange {
    will-change: transform;
}

.g-scrolling {
    -webkit-overflow-scrolling: touch;
}

.g-backface {
    backface-visibility: hidden;
}

.g-preserve3d {
    transform-style: preserve-3d;
}