`Position: relative` wird ignoriert?

Question

in meiner Testseite, verwende ich Screenfly, um die Auflösung zu überprüfen, und es scheint, dass meine "sozialen Login" und meine "Provinz Selektor" scrollen, trotz overflow: hidden und position: relative. Für die Klasse loginText (soziale Medien) wird sie aus einem anderen Dokument aufgerufen, auf das ich keinen Zugriff habe.

meine Testseite: Screenfly Test

Html:

<div class="hideFrench"><a href="frenchURL">Français</a></div> 
    <div class="styled-select"> 
     <select id="provinceSelect"> 
    <option>Please select a province</option> 
    <option value="alberta">Alberta</option> 
    <option value="bc">British Columbia</option> 
    <option value="Manitoba">Manitoba</option> 
    <option value="NB">New Brunswick</option> 
    <option value="NF">Newfoundland and Labrador</option> 
    <option value="Ns">Nova Scotia</option> 
    <option value="Nunavut">Nunavut</option> 
     <option value="ON" selected="selected">Ontario</option> 
    <option value="PEI">Prince Edward Island</option> 
    <option value="Quebec">Quebec</option> 
    <option value="Saskatchewan">Saskatchewan</option> 
     </select> 
    </div> 



     <div class="loginText" > 
     <a class="janrainEngage loginHref" href="#">Or login with 
     <span class="janrain-provider-icon-16 janrain-provider-icon-facebook"></span> 
     <span class="janrain-provider-icon-16 janrain-provider-icon-linkedin"></span> 
     <span class="janrain-provider-icon-16 janrain-provider-icon-twitter"></span> 
     </a> 
     </div> 

CSS:

.loginText{ 
    position: relative !important; 
    left: 600px; 
    top: -125px; 
    overflow: hidden; 

} 



.styled-select { 
    width: 185px; 
    position: relative; 
    left: 933px; 
    top: 40px; 
    background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center; 
    border: 1px solid #e9e9e9; 
    overflow: hidden; 

} 

.styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 13px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 

    } 


.hideFrench { 
    position: relative; 
    top: 70px; 
    left: 875px; 
    border: 2px 
} 


@media screen and (max-width: 768px){ 
    .styled-select, .hideFrench{ 
     display: none; 
     text-indent: 100%; 
     white-space: nowrap; 
     overflow: hidden; 
} 

} 

Es wurde ursprünglich richtig für die letzten paar Tage arbeiten, aber seitdem habe ich gemacht ein Viele Änderungen, und jetzt habe ich keine Ahnung, was das verursacht, dass es fest bleibt und wo diese große weiße Lücke zwischen dem Login und dem Provinz-Selektor herkommt.

Jede Hilfe wird sehr geschätzt, danke für Ihre Zeit!

Answer 1

.loginText { 
    position: absolute; 
    top: 60px; 
    right: 18px; 
    overflow: hidden; 
}