fixed不以body定位,相對於父級容器定位問題

2021-07-24 23:56:46 字數 928 閱讀 9599

經常在做乙個頁面的時候,希望乙個元素不希望隨著滾動條的滾動而動,這個時候就要用到fixed了

但是又不希望它根據整個視窗的左右兩邊定位(因為如果解析度變小了,它與中間頁面的距離就會變了)

希望達到的效果如下圖所示

解決方法:只需要使用margin定位就可以了

如圖,最先開始使用left,right進行定位

兩個按鈕是寫在中間內部頁面裡面的

效果在不同解析度下,與中間頁面顯示距離有差別

1920px解析度下:

1366px解析度下:

採用margin定位後,就會根據父級元素定位 (例子中的div .casedetail類 ):

效果如下,無論何解析度都以中間為定位,效果達成:

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後,可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...

CSS定位,相對定位,絕對定位

position relative 表示相對定位。對乙個元素進行相對定位,即指通過設定垂直或水平位置,讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px,那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素,那麼會在元素左邊建立30畫素的空間,也就是將元素向右移動,如...

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...