我创建了一个内容可编辑的div，它有一个粘性菜单工具栏(如果滚动到页面顶部，则会粘在浏览器顶部(和一个包含文本和图像的内容区域。单击图像会弹出一个工具箱，以便进行图像操作。
弹出式工具箱应该出现在光标指针旁边，hower:
- 使用CSS粘性配置，它不起作用-它在X和Y方向上都偏移了100多个像素，并且在不同的页面缩放因子下会得到更多/更少的偏移
- 当我删除粘性配置(位置：粘性，顶部：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>
试试这个：
<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>