首頁 > 開發者 > JavaScript
物體position:absolute後設定left:50%發生的有趣小事，positionabsolute
今天在重構ui控制項中3秒hint提示框樣式,發現了一個有趣的小事,特發個文章記錄一下,方便自己日後看一下
一 準備知識
①一個已設定寬高的塊狀元素設定position:absolute後會保持他原來寬高
②一個內斂元素設定position:absolute會自動轉為一個塊狀元素
那麼我提出三個問題:
problem01:一個沒有設定寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示?
problem02:一個內嵌元素position:absolute,top:0;left:0,它的寬高如何顯示?
problem03:一個元素position:absolute,left:50%發生什麼有趣小事?
二 針對 problem01:一個沒有設定寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示? 的回答
首先給物體設定position:absolute,top:0;left:0
測試代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body></html>
出現效果如下:
得出結論:沒有寬高的塊狀元素position:absolute,top:0;left:0後預設寬度是螢幕的寬度
三針對 problem02一個內嵌元素position:absolute,top:0;left:0,它的寬高如何顯示?的回答
首先給物體設定position:absolute,top:0;left:0
測試代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <span class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </span> </div> </body></html>
效果如下:
可得結論:內嵌元素position:absolute,top:0;left:0後,效果和沒有寬高的塊狀元素效果一致,即預設寬度是螢幕的寬度.
下面來延伸一段測試,看看:內嵌元素position:absolute,top:0;left:0後是否真的轉為塊狀元素,最簡單的測試就是給浮動起來的內嵌元素設定下寬高,看看是否起作用,測試代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ width: 100px; height: 100px; position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <span class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </span> </div> </body></html>
效果如下:
得出結論:內嵌元素position:absolute,top:0;left:0後會轉為塊狀元素,且高寬為程式員設定的寬高
四 針對 problem03:一個元素position:absolute,left:50%發生什麼有趣小事?的回答
這個效果我之前都沒有注意到,如果沒有意識到這個效果存在,很有可能出現樣式重複或者其他一些小問題
注意為了方便研究我將top設定為了0,下面來看測試代碼:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:50%; } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body></html>
效果如下:
這個效果很容易接受,但是請注意此時的div2的寬度已經被強制設定為父寬度(300px/2)的一般,用chrome內建的審核元素查看
並不能證明,可能會有人猜想是螢幕寬度限制了它的寬度,測試這個想法最簡單的方法就是當它position:absolute,left:50%後,讓它往左移足夠的空間,顯示它的全部寬度,我這裡採用transform: translateX(-50%);對它進行移位
測試代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:50%; transform: translateX(-50%); } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body></html>
效果如下:
用Chrome審查元素髮現:
我們可以看出這個沒有設定寬度的div在position:absolute,left:50%自動化佈建了自己的寬度為父寬度(300px)的一半.
當我把父寬度設定為400px的時候,再次測試上面的代碼,出現結果如下:
得出的結論是一致的,沒有設定寬度的div在position:absolute,left:50%自動化佈建了自己的寬度為父寬度(400px)的一半.
哈哈,這個效果一定要注意,要不然這個效果和其他樣式混在一起會出現很多難以解釋的效果.
下面再擴充一下,當有寬度的div設定了position:absolute,left:50%以後,它的寬度如何顯示,不要被繞暈哦,就是正常顯示啦
測試代碼如下:(設定父寬度400px,子寬度300px)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width:400px; height:400px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ width: 300px; position: absolute; background-color: red; top:0; left:50%; transform: translateX(-50%); } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body></html>
效果如下:
結論:當有寬度的div設定了position:absolute,left:50%以後,它的寬度正常顯示.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
