【CSS】标簽懸浮

标簽懸浮所有标簽固定位置顯示？

業務需求：按鈕需要固定螢幕右下角顯示！下面直接上解決方案

.fixed-z-index{
	// fixed（固定定位）
    position: fixed;
    // 至于圖層的最頂端
    z-index: 9999;
    // 相對于浏覽器視窗底部的位置
    bottom: 20px;
    // 同上 相對于浏覽器視窗右側的位置
    right: 170px;
  }
           

了解參數的意義

1. position

   position的四個屬性值relative,absolute,static,fixed

1、static（靜态定位）：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設定相對于其正常（原先本身）位置進行定位。可通過z-index進行層次分級。　　

3、absolute（絕對定位）：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。可通過z-index進行層次分級。

4、

fixed

（固定定位）：生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。可通過z-index進行層次分級。

附贈圓角陰影按鈕

.fixed-z-index_btn{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
  }
           

1. border 邊框

   三個參數（ border：邊框寬度 邊框樣式 邊框顔色）

   邊框樣式可以設定為：

   dotted solid double dashed

   =》

   點狀 實線 雙實線 虛線

2. border-radius 邊框圓角

   border-radius: 10px; 設定圓角直徑為10px

3. cursor 觸碰到焦點事件

   可參考：https://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

4. box-shadow 設定盒子的陰影

   可參考：https://www.w3school.com.cn/cssref/pr_box-shadow.asp

效果如下