ポップアップの位置の問題

Question

私は質問に答えるとポップアップを持つトリビアゲームを持っています。しかし、ポップアップの位置は一貫していません。私はどこに問題があるのか​​分からない。私は無駄に多くの異なるソリューションを試してきました。

HTML：

<div class="logo"> 
    <img src="css/rio-40.png"/> 
</div> 
<div class="container" id="start"> 
    <div class = "question"></div> 
    </br> 
    <ul id="answers"> 
    </br> 
    </br> 
    <li class= "answer span" id= "A"></li> 
    <li class= "answer span" id= "B"></li> 
    <li class= "answer span" id= "C"></li> 
    </ul> 
</div> 
<div class="container2"> 
    <div class="score"></div> 
</div> 

<div class="container3"> 
    <div class = "right-or-wrong" style = "display:none"></div> 
    </br> 
    <div class = "next" style = "display:none">Next question!</div> 
     <div id="score again"></div> 
     </div> 

<div class="cd-popup" role="alert"> 
    <div class="cd-popup-container"> 
     <p> OH NO! <br /> You got 0 out of 3 correct. <br /> Brush up on your trivia <br /> and play again.</p> 
     <ul class="cd-buttons"> 
      <li id="reset"><a href="#start">Play Again</a></li> 
     </ul> 
    </div> 
</div> 
<div class="cd-popup1" role="alert"> 
    <div class="cd-popup1-container"> 
    <img src="css/bronze-rio.png" /> 
    <p> You got 1 out of 3 correct. </br>Good job!</p> 
     <ul class="cd-buttons"> 
      <li id="reset"><a href="#start">Play Again</a></li> 
     </ul> 
    </div> 
</div> 
<div class="cd-popup2" role="alert"> 
    <div class="cd-popup2-container"> 
    <img src="css/silver-rio.png" /> 
    <p>You got 2 out of 3 correct.</br>Awesome job!</p> 
     <ul class="cd-buttons"> 
      <li id="reset"><a href="#start">Play Again</a></li> 
     </ul> 
    </div> 
</div> 
<div class="cd-popup3" role="alert"> 
    <div class="cd-popup3-container"> 
    <img src="css/gold-rio.png" /> 
      <p>You got 3 out of 3 correct.</br>Perfection!</p> 
     <ul class="cd-buttons"> 
      <li id="reset"><a href="#start">Play Again</a></li> 
     </ul> 
    </div> 
</div> 

CSS：ここ

@import url(https://fonts.googleapis.com/css?family=Slabo+27px); 
body { 
    /*background: ("css/background.png");*/ 
    background-color: #21509d; 
    text-align: center; 
    font-family: 'Slabo 27px', serif; 
    height: 600px; 
} 
.logo { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    background-color: #fff; 
    z-index: 10; 
} 

h1{ 
    color: #fff; 
    font-size: 40px; 
    font-weight: bolder; 
} 

.question { 
    font-family: 'Slabo 27px', serif; 
    padding-top: 50px; 
    vertical-align: middle; 
    display: inline-block; 
    /*height: 60px;*/ 
    width: 75%; 
    color: #fff; 
    font-size: 60px; 
    font-weight: bold; 
    z-index: 0; 
} 

#answers{ 
    text-align: center; 
    display: inline-block; 
    list-style-type: circle; 
} 
/* 
#answers ul{ 
    text-align: left; 
    display: inline-block; 
    list-style-type: none; 
}*/ 

.answer{ 
    text-align: center; 
    font-family: 'Slabo 27px', serif; 
    line-height: 60px; 
    font-size: 50px; 
    color: #fff; 
    cursor: pointer; 
    z-index: 1; 
    text-align: left; 

} 
/*span{ 
    text-align: center; 
}*/ 
.score { 
    padding-top: 40px; 
    font-family: 'Slabo 27px', serif; 
    width: 30%; 
    height:65px; 
    z-index: 0; 
    font-size: 60px; 
    /*font-weight: bold;*/ 
    text-align: center; 
    display: inline-block; 

} 
h2{ 
    font-family: 'Slabo 27px', serif; 
    font-size: 50px; 
} 
.container3{ 
    text-align: center; 
    vertical-align: middle; 
    /*z-index: 10;*/ 
} 
.right-or-wrong { 
    padding-top: 40px; 
    vertical-align: middle; 
    margin-left: 5%; 
    margin-right: 5%; 
    text-align: center; 
    height: 425px; 
    width: 90%; 
    font-family: 'Slabo 27px', serif; 
    background-color: #fff; 
    color: #21509d; 
    z-index: 0; 
    margin-top: -450px; 
    font-size: 40px; 
    font-weight: bold; 
} 
.next { 
    font-family: 'Slabo 27px', serif; 
    /*margin-left: 620px;*/ 
    height: 30px; 
    width: 200px; 
    background-color: green; 
    color: #fff; 
    z-index: 11; 
    cursor: pointer; 
    padding-top: 5px; 
    text-align: center; 
    border-radius: 20px; 
    margin-bottom: 100px; 
    display: inline-block; 
    font-weight: bold; 
} 

a{ 
    color: #fff; 
    text-decoration: none; 
    cursor: pointer; 
} 
.container{ 
    /*margin-top: 50px;*/ 
    text-align: center; 
    vertical-align: middle; 
    z-index: 0 
} 
.container2{ 
    text-align: center; 
    vertical-align: middle; 
    /*z-index: 10;*/ 
} 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

html * { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 


.img-replace { 
    /* replace text with an image */ 
    display: inline-block; 
    overflow: hidden; 
    text-indent: 100%; 
    color: transparent; 
    white-space: nowrap; 
} 

.cd-popup-trigger { 
    display: block; 
    width: 170px; 
    height: 50px; 
    line-height: 50px; 
    margin: 3em auto; 
    text-align: center; 
    color: #FFF; 
    font-size: 14px; 
    font-size: 0.875rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    border-radius: 50em; 
    background: #35a785; 
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); 
} 
@media only screen and (min-width: 1170px) { 
    .cd-popup-trigger { 
    margin: 6em auto; 
    } 
} 


/*popup if score 0*/ 
.cd-popup { 
    position: fixed; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(94, 110, 141, 0.9); 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    transition: opacity 0.3s 0s, visibility 0s 0.3s; 
} 
.cd-popup.is-visible { 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s; 
    transition: opacity 0.3s 0s, visibility 0s 0s; 
} 
.cd-popup-container { 
    font-family: 'Slabo 27px', serif; 
    font-size: 27px; 
    position: relative; 
    width: 100%; 
    max-width: 400px; 
    margin: 4em auto; 
    background: #FFF; 
    border-radius: .25em .25em .4em .4em; 
    text-align: center; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    -webkit-transform: translateY(-40px); 
    -moz-transform: translateY(-40px); 
    -ms-transform: translateY(-40px); 
    -o-transform: translateY(-40px); 
    transform: translateY(-40px); 
    /* Force Hardware Acceleration in WebKit */ 
    -webkit-backface-visibility: hidden; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    z-index: 05; 
} 
/*score 1*/ 
.cd-popup1 { 
    position: fixed; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(94, 110, 141, 0.9); 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    transition: opacity 0.3s 0s, visibility 0s 0.3s; 
} 
.cd-popup1.is-visible { 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s; 
    transition: opacity 0.3s 0s, visibility 0s 0s; 
} 
.cd-popup1-container { 
    font-family: 'Slabo 27px', serif; 
    font-size: 27px; 
    position: relative; 
    width: 100%; 
    max-width: 400px; 
    margin: 4em auto; 
    background: #FFF; 
    border-radius: .25em .25em .4em .4em; 
    text-align: center; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    -webkit-transform: translateY(-40px); 
    -moz-transform: translateY(-40px); 
    -ms-transform: translateY(-40px); 
    -o-transform: translateY(-40px); 
    transform: translateY(-40px); 
    /* Force Hardware Acceleration in WebKit */ 
    -webkit-backface-visibility: hidden; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    z-index: 05; 
} 
/*score 2*/ 
.cd-popup2 { 
    position: fixed; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(94, 110, 141, 0.9); 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    transition: opacity 0.3s 0s, visibility 0s 0.3s; 
} 
.cd-popup2.is-visible { 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s; 
    transition: opacity 0.3s 0s, visibility 0s 0s; 
} 
.cd-popup2-container { 
    font-family: 'Slabo 27px', serif; 
    font-size: 27px; 
    position: relative; 
    width: 100%; 
    max-width: 400px; 
    margin: 4em auto; 
    background: #FFF; 
    border-radius: .25em .25em .4em .4em; 
    text-align: center; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    -webkit-transform: translateY(-40px); 
    -moz-transform: translateY(-40px); 
    -ms-transform: translateY(-40px); 
    -o-transform: translateY(-40px); 
    transform: translateY(-40px); 
    /* Force Hardware Acceleration in WebKit */ 
    -webkit-backface-visibility: hidden; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    z-index: 05; 
} 
/*score 3 */ 
.cd-popup3 { 
    position: fixed; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(94, 110, 141, 0.9); 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; 
    transition: opacity 0.3s 0s, visibility 0s 0.3s; 
} 
.cd-popup3.is-visible { 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s; 
    transition: opacity 0.3s 0s, visibility 0s 0s; 
} 


.cd-popup3-container { 
    font-family: 'Slabo 27px', serif; 
    font-size: 27px; 
    position: relative; 
    width: 100%; 
    max-width: 400px; 
    margin: 4em auto; 
    background: #FFF; 
    border-radius: .25em .25em .4em .4em; 
    text-align: center; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    -webkit-transform: translateY(-40px); 
    -moz-transform: translateY(-40px); 
    -ms-transform: translateY(-40px); 
    -o-transform: translateY(-40px); 
    transform: translateY(-40px); 
    /* Force Hardware Acceleration in WebKit */ 
    -webkit-backface-visibility: hidden; 
    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    z-index: 05; 
} 
.cd-popup-container p { 
    font-family: 'Slabo 27px', serif; 
    font-size: 27px; 
    padding: 3em 1em; 
} 
.cd-popup-container .cd-buttons:after { 
    font-family: 'Slabo 27px', serif; 
    content: ""; 
    display: table; 
    clear: both; 
} 
.cd-popup-container .cd-buttons li { 
    font-family: 'Slabo 27px', serif; 
    float: left; 
    width: 100%; 
    list-style: none; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup-container .cd-buttons a { 
    font-family: 'Slabo 27px', serif; 
    display: block; 
    height: 60px; 
    line-height: 60px; 
    text-transform: uppercase; 
    color: #000; 
    -webkit-transition: background-color 0.2s; 
    -moz-transition: background-color 0.2s; 
    transition: background-color 0.2s; 
} 

.cd-popup1-container .cd-buttons:after { 
    font-family: 'Slabo 27px', serif; 
    content: ""; 
    display: table; 
    clear: both; 
} 
.cd-popup1-container .cd-buttons li { 
    font-family: 'Slabo 27px', serif; 
    width: 100%; 
    list-style: none; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup1-container .cd-buttons a { 
    font-family: 'Slabo 27px', serif; 
    display: block; 
    height: 60px; 
    line-height: 60px; 
    text-transform: uppercase; 
    color: #000; 
    -webkit-transition: background-color 0.2s; 
    -moz-transition: background-color 0.2s; 
    transition: background-color 0.2s; 
} 

.cd-popup2-container .cd-buttons:after { 
    content: ""; 
    font-family: 'Slabo 27px', serif; 
    display: table; 
    clear: both; 
} 
.cd-popup2-container .cd-buttons li { 
    font-family: 'Slabo 27px', serif; 
    float: left; 
    width: 100%; 
    list-style: none; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup2-container .cd-buttons a { 
    font-family: 'Slabo 27px', serif; 
    display: block; 
    height: 60px; 
    line-height: 60px; 
    text-transform: uppercase; 
    color: #000; 
    -webkit-transition: background-color 0.2s; 
    -moz-transition: background-color 0.2s; 
    transition: background-color 0.2s; 
} 

.cd-popup3-container .cd-buttons:after { 
    font-family: 'Slabo 27px', serif; 
    content: ""; 
    display: table; 
    clear: both; 
} 
.cd-popup3-container .cd-buttons li { 
    font-family: 'Slabo 27px', serif; 
    float: left; 
    width: 100%; 
    list-style: none; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup3-container .cd-buttons a { 
    font-family: 'Slabo 27px', serif; 
    display: block; 
    height: 60px; 
    line-height: 60px; 
    text-transform: uppercase; 
    color: #000; 
    -webkit-transition: background-color 0.2s; 
    -moz-transition: background-color 0.2s; 
    transition: background-color 0.2s; 
} 


.cd-popup-container .cd-buttons li:first-child a { 
    font-family: 'Slabo 27px', serif; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup1-container .cd-buttons li:first-child a { 
    font-family: 'Slabo 27px', serif; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup2-container .cd-buttons li:first-child a { 
    font-family: 'Slabo 27px', serif; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.cd-popup3-container .cd-buttons li:first-child a { 
    font-family: 'Slabo 27px', serif; 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover { 
    background-color: #F1C203; 
} 
.cd-popup-container .cd-buttons li:last-child a { 
    background: #F1C203; 
    border-bottom: .25em; 
} 
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover { 
    background-color: #F1C203; 
} 
.cd-popup-container .cd-popup-close { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    width: 30px; 
    height: 30px; 
} 
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after { 
    content: ''; 
    position: absolute; 
    top: 12px; 
    width: 14px; 
    height: 3px; 
    background-color: #8f9cb5; 
} 
.cd-popup-container .cd-popup-close::before { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    left: 8px; 
} 
.cd-popup-container .cd-popup-close::after { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    right: 8px; 
} 
.is-visible .cd-popup-container { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
} 
@media only screen and (min-width: 1170px) { 
    .cd-popup-container { 
    margin: 8em auto; 
    } 
} 

がCodepen here

、それは質問のパディングと大きさに関係している実際のGame here

Answer 1

ですと答える。コンテナをposition: absolute;と親のposition: relative;にして、すべて同じ場所に配置するようにしてください。