工作製作前端畫面時，遇到一個很有趣的現象，公司自製的下拉選單居然被下層的元素遮擋住了
想說好吧給A加個z-index，嗯??沒有效果?為什麼?腦中突然想到z-index預設值到底是什麼?
是Auto? 那如果三個z-index: auto的div究竟會怎麼排列呢?
// html
<div class="card card">
<div class="item1 item">item1</div>
<div class="item2 item">item2</div>
<div class="item3 item">item3</div>
</div>// css
.card {
position: relative;
}.item1 {
background-color: pink;
}.item2 {
background-color: cyan;
left: 100px;
}.item3 {
background-color: green;
left: 200px;
}
實際上越後面的element權重會越大，所以這解釋了上面為什麼下拉選單被遮住，但為什麼設定z-index沒有用? 查了一下資料發現一個很關鍵的內容
To set position for an element, add the CSS
positionproperty to anything other thanstatic, likerelativeorabsolute.
除了z-index外，position也是要對應設定的，
// html
<div class="card card1">
<Selector></Selector>
<div class="name">A</div>
</div><div class="card card2">
<Selector></Selector>
<div class="name">B</div>
</div>// css
.card1 {
position: relative;
z-index: 1;
}.card2 {
position: relative;
z-index: 0;
}
試了一下，果然解決了！不過後來B面的選單往上移動，那又是另一個故事了…
