Question

我有定位div的问题。我有以下css

.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不位于click位置，div出现在其他地方。我想知道出了什么问题！如果有人可以帮忙!!!

Answer 1

将位置从绝对位置更改为固定可以解决此问题。

而不是：

.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;    
}

设置体宽改变div的绝对定位

1 个答案: