欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Position:absolute屬性定位居中

2023-03-25    分類： 網(wǎng)站建設(shè)

在web前端的日常工作中，經(jīng)常會遇到設(shè)計師設(shè)計稿上不同模塊重疊顯示的需求。而要將兩個不同模塊重疊顯示通常是通過CSS中的position屬性來設(shè)置的。

前端定位
Position可取的值有 absolute、fixed、relative、static、inherit這些，具體說明可見下表：
前不久我在運用html+css來實現(xiàn)設(shè)計稿的前端效果工作中遇到了一個模塊上下左右居中的問題，最開始看到的這塊內(nèi)容的時候，首先想到的是運用position:absolute;屬性來定位，雖然最終是成功實現(xiàn)了模塊上下左右居中的效果，但是過程卻有些波折。
顯示圖片1
舉個例子，要實現(xiàn)下圖的上下左右居中：
如果是正常來說，基本就是量出兩個模塊的高度，然后用margin屬性來設(shè)置使紅色模塊上下左右相對于灰色模塊居中，這里給的灰色模塊是600px * 600px的大小，紅色模塊是100px*100px的大小。CSS代碼實現(xiàn)如下：





這樣固然能實現(xiàn)紅色模塊居中的效果，但是卻不太理想，如果紅色模塊是灰色模塊的內(nèi)容中獨立出來的呢？
在這里我是毫不猶豫的就選擇了position:absolute;這個屬性來實現(xiàn)的。這離將紅色模塊相對于灰色模塊獨立出來，這里讓灰色模塊填充文字，給紅色模塊設(shè)置透明度來對比。CSS實現(xiàn)代碼如下：

效果3
效果圖如下：
問題來了，這里雖然上下是居中的，但是左右卻明顯的沒有居中，經(jīng)過測試，是
left: 50%;
transform: translateX(-50%);
這兩個屬性沒有達成同等偏移。于是又改進了一下：

最終顯示效果
這樣就達到預(yù)期效果了。

網(wǎng)站名稱：Position:absolute屬性定位居中
當前URL：http://www.chinadenli.net/news/247577.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機、自適應(yīng)網(wǎng)站、網(wǎng)站收錄、面包屑導(dǎo)航、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)