返回頂部 右側fixed 內容寬度自適應

2021-07-14 23:16:05 字數 871 閱讀 2968

來自:

固定在右邊,且內容寬度變化不影響。使用了

1. position: fixed; 固定在螢幕

2. text-align: right; 掛在右側

3. margin-left:10px; 與內容區域有一定的距離

text-align屬性可以有效作用於inline/inline-block水平的元素,也就是對block沒有用

實際上,

text-align屬性對應用了position:absloute/fixed宣告的元素無效!

沒有應用left/top等屬性值的absolute元素就是個不佔據空間的普通元素,如果是block水平的,換行顯示;如果是inline水平的,跟在前面的文字後面顯示。

所以實現上面的效果可以: 

h hhhh

當然此方法有個問題,就是 會有一行空的,所以放在內容的最下面處理。

但是也可以通過隱藏的方式處理:height:0;overflow:hidden。可以參考隱藏相關的文字。

body,ul,li,p

ul,li

.main-wrap

.main-box

.postion-absoute

.right-wrap

.right-content-wrap

.right-wrap-new

.right-content-new

hhhhh

還有一種實現,通過float進行處理。不佔據空間。看上面藍色部分

ionic返回頂部

1 引入content模組 import from ionic angular 2 例項化 viewchild content content content 括號內是頁面內容哪乙個部分,第二個content為名字,第三個為例項化的模組 3 用法 this.content.scrollto 0,0,...

返回頂部 js

返回頂部 1.可以在網頁新增錨鏈結 2.利用js 可以實現動畫效果 test test test test test test test test test test test test test test test test test test test test test test test t...

返回頂部 demo

由於原理相當簡單,也沒必要詳細說明,主要是當滾動條拉下時,出現 返回頂部 按鈕,點選就會迅速把頁面往上滾。其中最難搞的卻是樣式的設定,由於ie6以下版本不支援position fixed,必須通過ie才支援的css expression進行絕對定位來模仿固定定位。跨瀏覽器的固定定位樣式,其中 符號只...