定位的簡介

定位(position)
- 定位是一種更加高級的佈局手段
- 通過定位可以將元素擺放到頁面的任意位置
- 使用position屬性來設置定位
可選值:
static 默認值,元素是靜止的沒有開啓定位
relative 開啓元素的相對定位
absolute 開啓元素的絕對定位
fixed 開啓元素的固定定位
sticky 開啓元素的粘滯定位

                - 相對定位:
                    - 當元素的position屬性值設置爲relative時則開啓了元素的相對定位
                    - 相對定位的特點:
                        1.元素開啓相對定位以後,如果不設置偏移量元素不會發生任何的變化
                        2.相對定位是參照於元素在文檔流中的位置進行定位的
                        3.相對定位會提升元素的層級
                        4.相對定位不會使元素脫離文檔流
                        5.相對定位不會改變元素的性質塊還是塊,行內還是行內

                - 偏移量(offset)
                    - 當元素開啓了定位以後,可以通過偏移量來設置元素的位置
                        top
                            - 定位元素和定位位置上邊的距離
                        bottom
                            - 定位元素和定位位置下邊的距離

                            - 定位元素垂直方向的位置由top和bottom兩個屬性來控制
                                通常情況下我們只會使用其中一
                            - top值越大,定位元素越向下移動
                            - bottom值越大,定位元素越向上移動
                        left
                            - 定位元素和定位位置的左側距離
                        right
                            - 定位元素和定位位置的右側距離

                            - 定位元素水平方向的位置由left和right兩個屬性控制
                                通常情況下只會使用一個
                            - left越大元素越靠右
                            - right越大元素越靠左
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章