關於定位 遮罩層效果使用心得

2021-07-27 09:48:05 字數 630 閱讀 9736

今天寫**時遇到個問題。原效果要求當滑鼠聚焦在其他位置時顯示正常內容,滑鼠懸停時顯示隱藏內容。我自己的思路是將隱藏部分設定位所需大小,透明度為零隱藏。定位在需要位置,滑鼠懸停觸發效果。用css實現。

定位時發現不能定位到所需位置。所以就重新學了定位,並歸納如下:

1position值:static  relative  absolute  fixed inhert

static:元素框正常生成,可以看作是預設值。

relative:相對於原來位置定位,原來位置任然保留。

absolute:元素完全脫離文件流,並相對於包含塊定位。定位後生成塊級框,不論原來屬於何種型別的框。

包含塊:對於浮動元素來說,包含塊就是最近的塊級祖先元素。而對於定位則不一樣。

根元素包含塊一般是指html或body

對於乙個非根元素,定位值為relative或static,包含塊為最近的塊元素

對於定位值為absolute的非根元素,包含塊是最近的定位值不是static的祖先元素。

綜上所述,要是定位實現達到所需效果,為遮蓋層父元素新增position:relative即可將父元素變為包含塊,遮蓋層寬高設為100%;

position:absolute;left:0;right:0;即可定位到所需位置。

關於使用CSS製作遮罩層

結構 整個元件分為a和b兩個子部分。內容區域為a部分,遮罩層為b部分。父部分的類名為 box,a部分為.content b部分為 mask 父級.box的 如下 position fixed left 0 right 0 top 0 bottom 0 z index 100 a部分.content的...

關於iview的使用心得

使用iview一定會用到render,畢業設計專案,趕鴨子上架,經過一番糾結,最終決定使用iview,感覺入坑了,bug很多,資料好少,用的人實在太少了,還有官方的各種解釋各種不清楚,哎。但是已經開始了這麼多,就不能放棄!加油吧。render函式的解釋在官方文件裡寫的很清楚,但是我是小白啊,經過一夜...

關於redis 的使用心得

專案中加入快取可以在很大程度上減輕資料庫伺服器的壓力,前幾年在專案中使用過redis,但當時使用的地方很少,對redis 也是初次使用。最近,發現專案訪問量增大,又重新使用了redis,目前很好的解決了訪問資料庫頻繁的操作。所以記錄下redis 使用的一些體會 redis 目前常使用的類庫有serv...