定位position
定位方向:left right top bottom
靜態定位:static 預設值,就是文件流
絕對定位:absolute
特點:
1.不佔據原來的位置(脫標)
2. 元素使用絕對定位,位置是從瀏覽器出發的 bottom:100px;則元素距瀏覽器底部100px;
3.巢狀的盒子,父盒子沒有使用定位,子盒子絕對定位,子盒子位置從瀏覽器出發
4.巢狀的盒子,父盒子使用相對定位,子盒子絕對定位,子盒子位置從父元素出發
5.給行內元素使用絕對定位之後,轉換為行內塊(不推薦使用)
調整元素的層疊順序,預設值0-999
相對定位:relative
特點:
1.使用相對定位,位置從自身出發
2.還佔據原來的位置
3:子絕父相
4.行內元素使用相對定位不能轉行內塊
固定定位:fixed
特點:
1.固定定位之後,不佔據原來的位置(脫標)
2.元素使用固定定位之後,位置從瀏覽器出發
3.元素使用固定定位之後,會轉化為行內塊(不推薦使用)
CSS中Position幾種屬性的總結
定位position 定位方向 left right top bottom 靜態定位 static 預設值,就是文件流 絕對定位 absolute 特點 1.不佔據原來的位置 脫標 2.元素使用絕對定位,位置是從瀏覽器出發的 bottom 100px 則元素距瀏覽器底部100px 3.巢狀的盒子,父...
CSS 的幾種 position 定位
1 static 靜態定位,所有標準文件流中的元素預設值。該關鍵字指定元素使用正常的布局行為,即元素在文件常規流中當前的布局位置。此時 top right bottom left 屬性無效。2 relative 相對定位,上浮但不脫離標準文件流。該關鍵字指定元素會相對於自身標準文件流中的位置進行相應...
定位上下文(補充css的position屬性)
把元素的position屬性設定為relative absolute或fixed後,繼而可以使用trbl屬性,相對於另乙個元素移動該元素的位置。這裡的 另乙個元素 就是該元素的定位上下文。絕對定位元素的預設上下文是body。然而絕對定位元素的任何祖先元素都可以成為它的定位上下文,只要把相應的祖先元素...