时间戳

首页 > 解决方案 > 具有粘性 CSS 属性的菜单会导致弹出窗口在 XY 偏移处偏离位置

html - 具有粘性 CSS 属性的菜单会导致弹出窗口在 XY 偏移处偏离位置

问题描述

我创建了一个内容可编辑的 div，它有一个粘性菜单工具栏（如果滚动到达页面顶部，则粘贴在浏览器顶部）和一个带有文本和图像的内容区域。单击图像会弹出一个工具箱以允许进行图像处理。

弹出工具箱应该出现在光标指针旁边，但是：

  1. 使用 CSS 粘性配置它不起作用 - 它在 X 和 Y 中偏移超过 100 像素，并且在不同的页面缩放因子下获得更多/更少的偏移。
  2. 当我删除粘性配置（位置：粘性，顶部：0）时，它会工作并在光标指针处弹出

为什么会这样？如何保持粘性菜单工具栏并使其按预期工作？

下面的代码：

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>

 /* EDITOR */
.qr_editor {
  max-width: 100%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  margin: 2rem;
}

/* TOOLBAR */
.qr_editor .toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index:10;
  
  /*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
  position: sticky;
  top: 0;
}

</style>
<div id="position"></div>
<br>
<div class="container">
    <div class="qr_editor">
        <div class="toolbar sticky">
            <div class="line">
                <span class="box">
                    <span>Example Sticky Tool Bar Goes Here</span>                      
                </span>
                <div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
                        Sample Image Tools Popup Box
                </div>   
          </div>
        </div>
        <div class="content-area">
            <div contenteditable="true">
                <div>Sample Text</div>
                <img class="qr_editor_img"  src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
            </div>
        </div>      
    </div>
</div>
<script>
$(document).ready(function(){
    //to display coordinates
    $( document ).on( "mousemove", function( event ) {
        $( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
    });

    //pops up toolbar for image manipulation
    var img_src = '';
    $(document).on("click", "img", function(e) {   
        console.log(e.pageX);
        console.log(e.pageY);
        //position the popup toolbar where the mouse click is
        e.preventDefault();
        $('#popup_toolbar').css( 'position', 'absolute' );
        $('#popup_toolbar').css( 'top', e.pageY );
        $('#popup_toolbar').css( 'left', e.pageX );
        $('#popup_toolbar').show();
    }); 
});
</script>
</body>

标签： htmlcss

解决方案

试试这个：

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>

 /* EDITOR */
.qr_editor {
  max-width: 100%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  margin: 2rem;
}

/* TOOLBAR */
.qr_editor .toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index:10;
  
  /*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
  position: sticky;
  top: 0;
}

#popup_toolbar {
  position: fixed;
}

</style>
<div id="position"></div>
<br>
<div class="container">
    <div class="qr_editor">
        <div class="toolbar sticky">
            <div class="line">
                <span class="box">
                    <span>Example Sticky Tool Bar Goes Here</span>                      
                </span>
                <div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
                        Sample Image Tools Popup Box
                </div>   
          </div>
        </div>
        <div class="content-area">
            <div contenteditable="true">
                <div>Sample Text</div>
                <img class="qr_editor_img"  src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
            </div>
        </div>      
    </div>
</div>
<script>
$(document).ready(function(){
    //to display coordinates
    $( document ).on( "mousemove", function( event ) {
        $( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
    });

    //pops up toolbar for image manipulation
    var img_src = '';
    $(document).on("click", "img", function(e) {   
        console.log(e.pageX);
        console.log(e.pageY);
        //position the popup toolbar where the mouse click is
        e.preventDefault();
        $('#popup_toolbar').css( 'top', e.pageY );
        $('#popup_toolbar').css( 'left', e.pageX );
        $('#popup_toolbar').show();
    }); 
});
</script>
</body>

推荐阅读