?????????????????????????????????????????????????? ? css定位機制和css動畫變換 css定位機制 定位屬性position（相生相克） 1? static：靜態定位 2? relative：相對定位（相對于自己原來的位置定位） 3. absolute：絕對定位（float）具有強大的破壞性，父容器管不住 4. fixed:固定定位（相對于瀏覽器定位不是相對于文檔定位） css其他定位屬性： 1 z-index（配合absolute）對象的層疊順序，使用一個證書來定義堆疊的層次整數值越大。。 2 top 3 right 4 left 5 bottom css相對定位position取值為relative css的相對定位仍然會占用原來的位置 css絕對定位position取值為absolute css絕對定位時從文檔流中徹底刪除 【相對定位】 * 1.使用position：relative;設置元素為相對定位的元素； * 2.定位機制 *相對于自己原來文檔流中的位置定位，當不指定top等定位值時不會改變元素位置??????????????? *相對定位元素仍會占據原有文檔流中的位置而不會釋放 3使用top、left、right、bottom、調整位置，當left和right同時存在是，left生效，當top和bottom同時存在時，top生效。 [絕對定位] * 1.使用position：absolute；設置元素為絕對定位元素; * 2.定位機制： *? · 相對于第一個非static元素有定位的祖先元素（即使用了relative、absolute、fixed定位的祖先元素） * ·如果所有祖先元素均未定位，則相對于瀏覽器左上角定位； *? ·使用absolute的元素，會從文檔流中完全刪除，原有空間釋放不再占有； *? ·可以通過設置relative鎖住； [固定定位] * position: fixed;是一種特殊的絕對定位，父容器無法使用relative鎖住； * 定位機制：永遠相對于瀏覽器定位； [z-index屬性]: *作用： 設置定位元素的z軸層疊順序， * 要求：1、 必須是定位元素才能用（relative、absolute、fixed） *????? 2、使用z-index需要考慮父容器的約束： *?????????? ·如果父容器為index：auto；則子容器的z-index不受父容器的約束； *?????????? ·如果父容器的z-index進行了設置，則子容器的層疊將以父容器的z-index為準（在同一父容器的不同子元素，能可以通過自己的z-index調整層疊關系） *???? 3、 z-index默認auto & z-index：0的區別： *???? z-index：auto為默認值，與z-index：0處于同一平面； *???? z-index：auto，不會約束子元素的z-index層次，而z-index：0會約束子元素與父元素在同一平面 * 4 z-index相同（ 處于同一平面的定位元素）的層疊關系，后來者居上； 絕對定位元素水平居中的設置方式： 1.left：50%； 2.設置margin-left為-width/2：margin-left: -50px; [負邊距] 1.實現塊級元素在會計元素中水平垂直居中 2.設置子容器為定位元素； top: 50%;? margin-top: -25px; left: 50%;? margin-left: -25px; 【 ?css 動畫變換 】 1.聲明一個動畫（關鍵幀） @keyframes name{ from{} to{} } 注意事項：階段寫法： 1.每個階段用百分比表示：從0%到100% 2.起止必須設置即從0%到100%或者from和to 2.在css選擇其中使用animation動畫屬性，調用聲明好的關鍵幀； 【animation縮寫順序】 動畫名稱，持續時間必須設置 animation可以同設置多個動畫，動畫時間 Animation-name 動畫名稱(@keyframes 名稱) Animation-duration 動畫持續時間 Animtaion-timing-function動畫速度曲線 常選ease Animtaion-delay 動畫延遲時間 Animation-iteration-count 播放次數，默認為1，無限次Infinite? Animation-direction 設置對象動畫在循環中是否反向運動 （ Alternate 逆向播放） * animation-fill-mode 設置對象動畫時間之外的狀態（forwards： 停留在動畫結束狀態 backwards:停留在動畫開始狀態） >>> 注意animation-name和animation-duration必須設置 >>> animation可以同時設置多個動畫 動畫之間用,分隔 animation:frame1 .3s,frame2 .5s…… transform定義變換： 常用變換：??? translate平移； scale縮放； rotate定義旋轉； transform可同時進行多個變換，多個變換之間用空格分隔； 例如：transform：scale（1.8,3.0）translateY(0px) rotate() translate-origion:定義變形起點： 可選值：left/center/right??? top/bottom/center? 或者直接寫X，Y軸坐標點。 例如transform:rotate(180deg) transform-origin:right bottom; 表示從左下角旋轉180度 transition屬性：參與過度的的屬性：可以單獨指定某個css屬性，也可以all，none 過渡開始到過渡完成的時間，.3 .5 ; 過度的樣式函數 常選ease 過渡開始的延遲時間，可以省略； transition屬性可以同時定義多個過渡效果，用逗號分隔 例如：transition：color .3 ease,border .5s linear; 加在hover上，當鼠標離開時會瞬間停止變化。 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS定位机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。