絕對定位的元素沒有正確對齊相對格內

在我的基於Cordova的應用程序中，我有一個應該顯示英國車牌圖形表示的div。絕對定位的元素沒有正確對齊相對格內

這是它應該如何看：

（它是如何顯示在iOS - 科爾多瓦版本3.8）

但是，在Android上，科爾多瓦版本4.1.1，它看起來像這個代替：

的片段是如下，證明了問題。任何幫助將非常感激。

.registration-plate-container { 
 
    text-align: center; 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: relative; 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>

來源

2016-09-14 Ryan

.registration-plate-container { 
 
    /* text-align: center; */ /* throws off position property centering */ 
 
    position: relative;  /* this is the actual container element, 
 
           so set the boundaries here for abspos children */ 
 
    height: 75px;   /* for demo only */ 
 
    border: 1px dashed red; /* for demo only */ 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: absolute;   /* changed from 'relative` */ 
 
    left: 50%;     /* center horizontally */ 
 
    transform: translateX(-50%); /* center fine-tuning */ 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0;    /* tell it where to go */ 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>

來源

2016-09-14 17:47:37

這修正的元素之前的定位，但它重疊是它下面的內容 - 我該如何解決這個問題？ – Ryan

@Ryan更改div的z位置..如果我明白你在問什麼 –

如果你的意思是在y軸下方，你需要爲容器設置一個高度。我更新了我的答案。 –

絕對定位的元素沒有正確對齊相對格內

回答

相關問題