Einstellung Körperbreite ändert absolute Positionierung von div

Ich habe Probleme mit der Positionierung div. Ich habe folgende CSSEinstellung Körperbreite ändert absolute Positionierung von div

.popup{ 
    display: none; 
    text-align: center; 
    background: #eee; 
    max-width: 200px; 
    font-size: 2em; 
    color: #ff0000; 
    position: absolute; 
    border-radius: 10px; 
    z-index: 2;  
}

hier das Javascript ist:

$("#main").click(function(event){ 
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'}); 
});

hier geht der HTML

<!DOCTYPE html> 


     <html> 
      <head> 
       <title>TODO supply a title</title> 
       <meta charset="UTF-8"> 
       <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon"> 
     <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="css/main2.css"> 
      </head> 
      <body>  
      <div class="container"> 
       <div class="row">    
        <div class="col-md-12">     
         <h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1> 
        </div> 
       </div> 
       <div class="row">   
       <div class="col-md-12">    

        <div class="helper" id="helper"> 
         Click Here! 
        </div> 
        <div class="popup" id="popup"> 
        oops! You clicked at wrong place. Try again! 
        </div>      
        <div class="workspace" id="workspace" contenteditable="true"></div> 
        <div id="main" class="main"> 

        </div>    

       </div>   
       </div> 
     </div><!-- /container --> 


     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
       <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 

       <script src="js/vendor/bootstrap.min.js"></script> 

      <script src="js/main2.js"></script>     
      </body> 
     </html>

alles up funktioniert gut hier! Aber wenn ich folgendes spezifiziere,

das Div ist nicht an der Stelle des Klicks positioniert, div erscheint woanders. Ich frage mich, was falsch ist! Wenn jemand helfen könnte !!!

Quelle

2017-02-19 Shah Aadil

versuchen, die Position zu festen Wechsel – Chiller

Ändern der Position von absolut zu beheben löst dieses Problem.

Statt dessen:

.popup{ 
    display: none; 
    text-align: center; 
    background: #eee; 
    max-width: 200px; 
    font-size: 2em; 
    color: #ff0000; 
    position: absolute; 
    border-radius: 10px; 
    z-index: 2;  
}

Verwendung dieses:

.popup{ 
    display: none; 
    text-align: center; 
    background: #eee; 
    max-width: 200px; 
    font-size: 2em; 
    color: #ff0000; 
    position: fixed; 
    border-radius: 10px; 
    z-index: 2;  
}

Quelle

2017-02-19 12:48:30

Einstellung Körperbreite ändert absolute Positionierung von div

Antwort

Verwandte Themen