настройка обрезка кузова изменение абсолютное позиционирование 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

ответ

Смежные вопросы