使用position屬性實現的懸浮在元素上方的小塊效果
利用position屬性可以實現各種美觀的效果,本章節就介紹一下利用position屬性實現懸浮在元素上方的小塊效果,比如購物網站購物車選中商品的數量有的就是這樣的效果,當然這裡的效果非常簡單,不過這裡的目的就是演示一下position屬性的用法。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #car { width:150px; height:30px; background:#999999; color:white; text-align:center; line-height:30px; margin:232px 300px; border:1px solid black; position:relative; } #num { width:20px; height:20px; background: red; color:white; text-aligh:center; line-height:20px; position:absolute; top:-15px; left:25px; } </style> </head> <body> <div id="car">去購物車付款 <div id="num">0</div> </div> </body> </html>
一個小的div塊懸浮在父元素的上方,下面簡單介紹一下實現原理。
一.實現原理:
父元素採用的是相對定位,之所以這樣是因為這可以使它內部採用定位的子元素可以以它為定位參考物件,然後在設定子元素的top和left屬性值控制位置就實現了此效果。
二.相關閱讀:
(1).相對定位參閱CSS 相對定位一章節。
(2).絕對定位參閱CSS 絕對定位一章節。
相關文章
- 阿里雲aliyunlive視訊直播,設定元素浮在視訊上方阿里
- Css 中的position屬性CSS
- css實現匹配具有指定屬性的元素CSS
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- javascript實現的設定和獲取元素屬性JavaScript
- 使用 CSS 選擇器實現對不含 title 屬性元素的選擇CSS
- 純CSS3屬性animation實現的打字效果CSSS3
- 使用CSS background實現炫酷懸停效果CSS
- CSS3 滑鼠懸浮元素放大和縮小效果CSSS3
- html中Position屬性值介紹和position屬性四種用法HTML
- 滑鼠懸浮或者選中實現當前元素凹凸視覺效果視覺
- 【譯】使用CSS Transitions實現圓形懸停效果CSS
- 實現元素的淡入淡出效果
- 實現列表懸浮標籤「頂上去」的效果
- 使用Three.js實現神奇的3D文字懸浮效果JS3D
- 使用jQuery獲取iframe元素的value屬性值jQuery
- HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別HTML
- 利用CSS變數實現炫酷的懸浮效果CSS變數
- 前端~定位屬性position(relative、absolute、fixed)的分析前端
- IE支援的HTML元素的DISABLE屬性在NETSCAPE4.76中的實現HTML
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- jQuery實現的具有淡出效果的元素刪除jQuery
- 滑鼠懸浮div實現旋轉效果
- CSS3滑鼠懸浮元素放大效果CSSS3
- 【後知後覺系列】css position: sticky 屬性以及某些場景的使用CSS
- script元素屬性
- jQuery使用css()方法設定元素的display屬性值jQueryCSS
- 利用CSS變數實現令人震驚的懸浮效果CSS變數
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 總結一下CSS中的定位 Position 屬性CSS
- css3實現的滑鼠懸浮出現輻射波紋效果CSSS3
- Laravel 動態屬性的實現Laravel
- img元素的object-fit屬性Object
- jQuery如何修改元素的屬性jQuery
- js通過元素的class屬性獲取元素JS
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- CALayer mask屬性實現漸變色Label、刮刮卡效果
- CSS - 定位屬性position使用詳解(static、relative、fixed、absolute)CSS