免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Position:absolute屬性定位居中(position)

2024-02-23    分類: 網(wǎng)站建設

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

Position可取的值有 absolute、fixed、relative、static、inherit這些,具體說明可見下表:
前不久我在運用html+css來實現(xiàn)設計稿的前端效果工作中遇到了一個模塊上下左右居中的問題,最開始看到的這塊內容的時候,首先想到的是運用position:absolute;屬性來定位,雖然最終是成功實現(xiàn)了模塊上下左右居中的效果,但是過程卻有些波折。

舉個例子,要實現(xiàn)下圖的上下左右居中:

如果是正常來說,基本就是量出兩個模塊的高度,然后用margin屬性來設置使紅色模塊上下左右相對于灰色模塊居中,這里給的灰色模塊是600px * 600px的大小,紅色模塊是100px*100px的大小。CSS代碼實現(xiàn)如下:
<div class="div1">
<div class="div2"></div>
</div>
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
margin: 250px auto;
background: #f00;
}

</style>
這樣固然能實現(xiàn)紅色模塊居中的效果,但是卻不太理想,如果紅色模塊是灰色模塊的內容中獨立出來的呢?

在這里我是毫不猶豫的就選擇了position:absolute;這個屬性來實現(xiàn)的。這離將紅色模塊相對于灰色模塊獨立出來,這里讓灰色模塊填充文字,給紅色模塊設置透明度來對比。CSS實現(xiàn)代碼如下:
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 250px;
top: 250px;
opacity: .5;
}

效果如下:
雖然實現(xiàn)了這個效果,但是卻不甚滿意,要是不能固定灰色模塊的高度呢,要是不能固定紅色模塊的高度呢?

于是稍加思索后我寫出了下面這樣的解決方法(這里還是默認上面的寬高):
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
background: #f00;
opacity: .5;
}
</style>

效果圖如下:
問題來了,這里雖然上下是居中的,但是左右卻明顯的沒有居中,經(jīng)過測試,是
left: 50%;
transform: translateX(-50%);
這兩個屬性沒有達成同等偏移。于是又改進了一下:
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: #f00;
opacity: .5;
}
</style>

這樣就達到預期效果了。


以上就是關于Position:absolute屬性定位居中(position),希望對你有幫助,更多內容關注創(chuàng)新互聯(lián)。

文章名稱:Position:absolute屬性定位居中(position)
當前網(wǎng)址:http://m.newbst.com/news48/318448.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、網(wǎng)站制作企業(yè)網(wǎng)站制作云服務器微信小程序

廣告

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

成都定制網(wǎng)站網(wǎng)頁設計