元素的前后关系
1、被定位(相對的,絕對的)的元素會在未定位的元素前面顯示
2、同一被定為父級元素的兩個元素,z-index值高的顯示在前面(只對被定位元素起作用)
3、不同被定位父級元素的兩個元素,前后順序跟父級元素的的z-index值高低有關,父級高則高。
4、opacity影響元素的先后順序,試驗確實如此:將原本顯示在前面的元素的opacity值設置為小于1的數之后,該元素會顯示在最后面?原因尚不清楚。
例子:
<!doctype html>
<html>
??? <head>
??????? <style type="text/css">
??????????? .red, .green, .blue {position: absolute;display: block;width: 100px;height: 100px;}
??????????? .red {background: red;z-index: 1;left: 0;top: 0}
??????????? .green {background: green;left: 20px;top: 20px;}
??????????? .blue {background: blue;left: 40px;top: 40px;}
??????????? div:first-child {opacity: .99;}
??????? </style>
??? </head>
??? <body>
??????? <div>
??????????? <span class="red">Red</span>
??????? </div>
??????? <div>
??????????? <span class="green">Green</span>
??????? </div>
??????? <div>
??????????? <span class="blue">Blue</span>
??????? </div>
??? </body>
</html>
轉載于:https://www.cnblogs.com/charling/p/3340198.html
總結
- 上一篇: 关于64位WIN7下正确建立JAVA开发
- 下一篇: OpenLdap 相关命令