div上没有CSS绝对值的CSS样式“句柄”

Question

我在上面的“句柄”中设置了“日历” div的样式。

这是通过将2 div 3 * 3 px设置为黑色背景并将其放置在相对位置的父div内日历div顶部正上方的绝对位置来创建的。

此日历位于图片上方的绝对位置。

这可行，但是感觉非常“硬编码”，因为日历div中的每一次更改都会破坏显示，因为“句柄”将停留在同一位置，而日历的顶部边框可以移动。

如何在日历div本身的顶部获得相同的“句柄”样式，以便更改日历CSS高度不会影响“句柄”？

Answer 1

您可以像这样使用psuedo-element-请参见下面的工作示例。

height元素是一个3像素高的框（top），左右两侧有3像素黑色边框。

它绝对位于父日历元素的Y轴（left）上-6像素处，因此它超过了日历的顶部边框，并且超过了日历的顶部边界3像素right和.cal { border: 3px solid #000; display: inline-block; font-family: sans-serif; position: relative; text-align: center; } .cal span { /* day */ display: block; font-size: 10px; padding: 3px 10px; } .cal b { /* date number */ display: block; border-top: 3px solid #000; padding: 5px; } .cal::before { /* handles */ content: ''; position: absolute; height: 3px; top: -6px; border-left: 3px solid #000; border-right: 3px solid #000; left: 3px; right: 3px; }日历范围。

<div class="cal">
  <span>SUN</span>
  <b>3</b>
</div>

<br><br>

<div class="cal">
  <span>TALLER</span>
  <b>3</b>
  <b>4</b>
  <b>5</b>
</div>

$('#element')
.on('mousedown', function(e){

        var mouseX = e.pageX;

        $('body').on('mousemove', function(e){
            mouseX = e.pageX;
        });

        timer = setInterval(function(){
            console.log(mouseX);
        }, 100);
})
.on('mouseup mouseleave', function(){
    $('body').off('mousemove');
});