opcity引發的元素層級變化

2021-08-21 02:52:29 字數 441 閱讀 2990

發現這個問題是在上定位了乙個刪除按鈕,當我用opcity屬性對進行透明化處理的時候,發現刪除按鈕不管用了,最後發現刪除按鈕是被覆蓋了,究其原因是因為opcity這個屬性造成的層級變化。

我發現含有opcity屬性的元素層級會比其他元素的層級高,這時候z-index是不起作用的,opcity會一直高於其他元素的層級。

給其他元素加上position屬性,會使該元素跟opcity處在同一層級之上,這時候你再給元素附加z-index就可以起作用了。

總結:當你使用opcity的時候會對元素層級造成影響

解決辦法:加上position和z-index可以對opcity元素進行覆蓋

.box

.box1

.box2

.box3

如上**:box2的層級是最高的。

由ATM機的變化引發的思考

先做乙個過期的廣告,前些日子有幸參加了世界可用性日 wud 北京站的活動,這是世界可用性日的第一年,活動在多個國家同時舉行,今年北京站的活動是一 次半講座形式的聚會,來講的除了主辦方uigarden的人外還有一些可用性行業裡的著名人士。windy沒來是個遺憾,ibm的趙晨博士來了是個驚喜。有些不足的...

關於元素層級的一些介紹

說起瀏覽器中的元素層級,我們首先能想到的就是z index,position 值非static z index結合使用,即可控制元素在瀏覽器中的顯示層級。那除了這種方式外,還有其他什麼方式可以控制元素的層級呢?7階層疊水平 任何元素都有層疊順序,當元素發生層疊時,層級高的會顯示在上面,覆蓋層級低的元...

CSS中五種定位及元素的層級

定位是一種更加高階的布局手段,通過定位我們可以將乙個元素擺放到頁面的任意位置 使用position屬性來設定定位 可選值 static 預設值 元素是靜止的 沒有開啟定位 relative 開啟元素的相對定位 相對定位的特點 1.元素開啟相對定位以後 如果不設定偏移量 offset 元素不會發生任何...