z index不起作用的大坑

2021-09-25 10:38:00 字數 645 閱讀 3488

話說好久就沒有更新部落格了,今天為了裝一把,差點沒把自己裝進去。。。以後還是低調一點好,哈哈,話不多說,直奔主題。

今天遇到的就是z-index不起作用的問題。乙個後台小哥不知道抽什麼瘋,寫元素覆蓋偏不讓用absolute,搞的我之後廢了9牛二虎之力寫了一下,問題描述是這樣的,

一對兄弟節點,insert和parent,parent有兩個子節點subtop和subbottom,展現的結果是想讓subtop在insert上面,subbottom在insert下面,

**如下:

2、問題標籤無position屬性(不包括static);

3、問題標籤含有浮動(float)屬性。

這樣也很好理解為什麼parent設定了position和z-index之後insert的z-index就會失效的問題了,他的解決辦法有是三個:

1、position:relative改為position:absolute;

2、浮動元素新增position屬性(如relative,absolute等);

3、去除浮動。

所以,去掉parent的position和z-index,達到了我想要的效果,如下圖所示:

z index不起作用的大坑

加500行埋點是不是會占用你一天的時間而且很容易犯錯,如果你想只用一小時準確加完這500行埋點剩下一天喝茶聊天來試試這520工具,高效加埋點,目前我們公司100號前端都在用 2 問題標籤無position屬性 不包括static 3 問題標籤含有浮動 float 屬性。這樣也很好理解為什麼paren...

z index的運用(z index不起作用)

需要完成的效果 處於hover狀態 實際完成效果碰到的問題 處於hover狀態,忽略字型圖示的不一樣,找不到一樣的 可以看到這裡再給下面的盒子新增box shadow後,陰影部分在hover狀態的情況下,還是能顯示出來。這時候想到了z index來解決問題 z index 屬性設定元素的堆疊順序。擁...

z index有時候不起作用

其實平時換做不同顏色的兩個div設定他們的position,top,left我們就可以看到乙個好像在另乙個上面一樣,但是當div沒有設定顏色的時候 我們可以看到好像重疊一樣,沒有發生乙個把另乙個覆蓋了,z index好像沒起啥作用,這是為什麼呢?答案就是 沒有設定顏色,估計預設是tranaparen...