设置身体宽度改变div的绝对位置

我有定位div的问题。我有以下的CSS设置身体宽度改变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;  
}

这里是JavaScript：

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

这里去的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>

一切正常了这里！但是，当我指定以下时，

body { 
    padding: 0px; 
    width: 1230px; 
    margin: 0 auto;  
}

该div未定位在点击的位置，div出现在其他地方。我想知道什么是错的！如果有人可以帮助！

来源

2017-02-19 Shah Aadil

尝试改变的位置固定 – Chiller

从绝对位置改变为固定解决此问题。

取而代之的是：

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

使用本：

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

来源

2017-02-19 12:48:30

设置身体宽度改变div的绝对位置

回答

相关问题