溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css定位方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css定位方式有哪些”吧！
css定位方式有5種：1、浮動定位（float）。2、static（靜態定位）；沒有定位，元素出現在正常的流中。3、relative（相對定位）；元素脫離正常的文檔流。4、absolute（絕對定位）。5、fixed（固定定位）。
本教程操作環境：windows7系統、CSS3版、Dell G3電腦。
復雜的網頁布局都是通過各種網頁元素靈活定位實現的，網頁中的各種元素定位都有自己的特點。下面我們來看一下css的幾種定位方式。
這種定位方式很簡單，只需規定一個浮動的方向（如：float:left;就表示這個元素向左邊擺放），它的定位是相對于父元素容器；
如果該元素設置了浮動，后面緊鄰的則會受到浮動的影響，因此需要后面的元素若要不受影響，則要在后面清除浮動（可用clear:both;等方法），在兩個相鄰元素設置相同浮動的情況下，兩元素將按順序相鄰擺放。這種定位使得元素脫離文檔流。
position定位是指定位置的定位，以下為常用的幾種：
1、static（靜態定位）：
當我們沒有指定定位方式的時候，這時默認的定位方式就是static，也就是按照文檔的書寫布局自動分配在一個合適的地方，這種定位方式用margin來改變位置，對left、top、z-index等設置值無效，這種定位不脫離文檔流；
2、relative定位（相對定位）：
該定位是一種相對的定位，可以通過設置left、top等值，使得指定元素相對其正常的位置進行偏移，這種定位不脫離文檔流；
3、absolute定位（絕對定位）：
這種定位通過設置top、right、bottom、left這些偏移值，相對于 static 定位以外的第一個父元素進行定位（這種定位通常設置父元素為relative定位來配合使用），在沒有父元素的條件下，它的參照為body，該方式脫離文檔流；
4、fixed（固定定位）：
這種定位方式是相對于整個文檔的，只需設置它相對于各個方向的偏移值，就可以將該元素固定在頁面固定的位置，通常用來顯示一些提示信息，脫離文檔流；
感謝各位的閱讀，以上就是“css定位方式有哪些”的內容了，經過本文的學習后，相信大家對css定位方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
