物體position:absolute後設置left:50%發生的有趣小事

時間 2019-11-20

標籤物體 position absolute 設置 left 50% 發生有趣小事欄目 CSS 简体版

原文原文鏈接

今天在重構ui控件中3秒hint提示框樣式,發現了一個有趣的小事,特發個文章記錄一下,方便本身往後看一下css

一準備知識html

①一個已設置寬高的塊狀元素設置position:absolute後會保持他原來寬高程序員

②一個內聯元素設置position:absolute會自動轉爲一個塊狀元素chrome

那麼我提出三個問題:測試

problem01:一個沒有設置寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示?ui

problem02:一個內聯元素position:absolute,top:0;left:0,它的寬高如何顯示?spa

problem03:一個元素position:absolute,left:50%發生什麼有趣小事?scala

二針對 problem01:一個沒有設置寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示? 的回答code

首先給物體設置position:absolute,top:0;left:0orm

測試代碼以下:

<!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>