css 定位及遮罩層小技巧

2022-07-22 02:24:09 字數 341 閱讀 4416

relative定位:相對它自己的正常位置的定位

fixed定位:fixed定位是指元素的位置相對於瀏覽器視窗是固定位置,即使視窗是滾動的它也不會滾動,且fixed定位使元素的位置與文件流無關,因此不佔據空間,且它會和其他元素發生重疊。

absolute定位:絕對定位的元素相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於。

遮罩層關鍵點:position   z-index

position:注意定位型別的選擇(推薦:fixed,absolute),只有正確定位了,才會形成遮罩。

css彈出遮罩層

說明 需要jquery支援,支援ie8 googlechrome,firefox,話不多說,上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...

純CSS遮罩層特效

demo 背景顏色 漸變 邊框圓角 相對定位 多餘邊框隱藏 滑鼠指標變成小手 box 設定乙個偽類before 前置的 content 內容設定為空 背景設定為透明背景顏色 寬高各為父級的百分百 整體透明度為0 定位為絕對定位 top 為 0 left 為 0 層次結構 index為0 transi...

關於使用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的...