絕對定位元素 - 最高百分比不起作用

絕對定位元素可能會忽略「最高」位置百分比的原因是什麼？百分比適用於「左」，我可以使用像素和vh垂直放置它，而不是百分比。絕對定位元素 - 最高百分比不起作用

來源

2017-05-27 Sergi

您可能在路上或某物上有不可見的固定元素。我們可以看看代碼嗎？ – 2017-05-27 09:13:02

沒有任何代碼顯示您的問題，很難猜測:) –

以下是您可能會發現與解決該問題有關的內容：https://stackoverflow.com/questions/28238042/setting-css-top-percent-not-working-如預期的 – slevy1

這是因爲您必須製作絕對元素的父級 - 「position：relative」。那麼絕對元素的頂部和左側字段將獲得相對於父項的應用值。

來源

2017-05-27 09:33:21 johnpro

不是父母。該元素相對於其第一個定位的（非靜態的）祖先元素進行定位。 – HTCom

您需要爲其父元素定義佈局。

佈局可能比「靜態」像「固定」，其他的「絕對」，「相對」

這將有助於瀏覽器瞭解這一比例的計算中，需要在維吾爾語做它的父，而不是窗口大小。

來源

2017-05-27 10:34:17

事實證明，有多種方法可以絕對定位元素。這是不使用父DIV的一種方法：

CSS：

html,body { 
    width:100%; 
    height:100%; 
    background:red; 
    } 
    .centered-axis-xy { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%); 

} 
div.cyan5050 { 
    width:50%;height:50%; 
    background:cyan; 
} 
div p { 
    width:100%; 
    height:50%; 
    margin-top: 20vh; 
    text-align:center; 
}

HTML：

<div class="cyan5050 centered-axis-xy"> 
     <p>Content to Display</p> 
</div>

見fiddle

通常情況下，如果你使用百分比需提供DIV標籤百分比的基礎，即包含外部DIV或其他resp的高度和寬度百分比等HTML和body元素。但是，在這種情況下，由於CSS包含了一個響應式定位技術here，所以html和body元素的百分比是可選的，這要歸功於CSS轉換配備了translate（）function。

來源

2017-05-27 10:38:52 slevy1

絕對定位元素 - 最高百分比不起作用

回答

相關問題