绝对定位的元素在相对 div 内未正确对齐答案

【问题标题】：Absolutely positioned element not correctly aligned inside relative div绝对定位的元素在相对 div 内未正确对齐
【发布时间】：2016-09-14 17:41:00
【问题描述】：

在我基于 Cordova 的应用程序中，我有一个 div，它应该显示英国车牌的图形表示。

这就是它应该的样子：

（它在 iOS 上的显示方式 - Cordova 版本 3.8）

但是，在 Android 上，Cordova 版本 4.1.1，它看起来像这样：

sn-p如下，说明问题。任何帮助将不胜感激。

.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;
}

&lt;div class='registration-plate-container'&gt;&lt;span class='registration-plate-ui'&gt;AB12 CDE&lt;/span&gt;&lt;/div&gt;

【问题讨论】：

标签： android html css cordova css-position

【解决方案1】：

.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;
}

&lt;div class='registration-plate-container'&gt;&lt;span class='registration-plate-ui'&gt;AB12 CDE&lt;/span&gt;&lt;/div&gt;

【讨论】：

这修复了 before 元素的位置，但是它与下面的内容重叠 - 我该如何解决这个问题？
@Ryan 更改 div 的 z 位置 .. 如果我理解你在问什么
如果你的意思是y轴低于它，你需要为容器设置一个高度。我更新了我的答案。
如果是这样，那么@Michael_B 是正确的。或者您可以设置边距，任何一种方式都可以。
在 .registration-plate-ui 上将位置改回相对位置也可以解决问题，只要容器 div 也相对定位即可。