Html、CSS基礎 – 定位：瀏覽器的支援度

奧莉薇-avatar-img
奧莉薇
更新於 發佈於 閱讀時間約 1 分鐘

※ Can I use：超實用的前端開發工具網站

網址：https://caniuse.com/

功能：查詢各種 HTML、CSS、JavaScript 等語法或功能在不同瀏覽器上的支援情況。

raw-image

使用方式：

raw-image
raw-image

加上前綴：解決部分支援的問題

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

自動加上前綴：

網址：https://autoprefixer.github.io/

raw-image




留言
avatar-img
留言分享你的想法！
avatar-img
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
奧莉薇走在成為後端工程師之路上的其他內容
2025/07/31
Html、CSS基礎 – 定位：置中方式
※ transform變形的屬性： ※ 建立transform專案： ※ transform範例： index.html： <body> <div class="wrapper"> <div class="box"></div> </div> </body> style.css：
Thumbnail
2025/07/31
Html、CSS基礎 – 定位：置中方式
※ transform變形的屬性： ※ 建立transform專案： ※ transform範例： index.html： <body> <div class="wrapper"> <div class="box"></div> </div> </body> style.css：
Thumbnail
2025/07/31
Html、CSS基礎 – 定位：z-index
※ z-index： 說明：在瀏覽器的排版邏輯中，網頁不是一個平面結構，它實際是建立在一個三維空間模型上，所以網頁是立體的。在這個空間中，除了水平（X 軸）與垂直（Y 軸）方向外，Z 軸代表了元素在前後位置上的疊加關係。z-index可以幫助我們調整網頁的層級。當多個元素在視覺上「重疊」時，調
Thumbnail
2025/07/31
Html、CSS基礎 – 定位：z-index
※ z-index： 說明：在瀏覽器的排版邏輯中，網頁不是一個平面結構，它實際是建立在一個三維空間模型上，所以網頁是立體的。在這個空間中，除了水平（X 軸）與垂直（Y 軸）方向外，Z 軸代表了元素在前後位置上的疊加關係。z-index可以幫助我們調整網頁的層級。當多個元素在視覺上「重疊」時，調
Thumbnail
2025/07/30
Html、CSS基礎 – 定位
※ 定位方法：position、z-index position 定位方式： 說明： position是一個css裡面的樣式。 功能：讓你的元素可以自由定位。 position 有四個樣式的值： 說明： static：是 HTML 元素的預設定位方式，不會因為設定 top、left 等
Thumbnail
2025/07/30
Html、CSS基礎 – 定位
※ 定位方法：position、z-index position 定位方式： 說明： position是一個css裡面的樣式。 功能：讓你的元素可以自由定位。 position 有四個樣式的值： 說明： static：是 HTML 元素的預設定位方式，不會因為設定 top、left 等
Thumbnail
看更多