HTML CSS试图创建一个出现在文本上的输入字段

Question

我正在创建一个项目，其中有多个使用引导程序创建的卡。每张卡片都有页眉、正文和页脚。单击卡片时，我希望输入字段出现在页眉、页脚和正文中。此输入字段应出现在当前文本上方。 我在切换课程时没有问题，但是我很难让我的输入字段与文本对齐。

这是 HTML 结构：

`<div class='card-deck col-3' id='deck'>
        <div class='card grow'>
            <div class='card-header par'>
                <h3 class='target'>${tasks.task}</h3>
                <input id='updateTask' placeholder='Task'>
            </div>
            <div class='card-body par'>    
                <h6 class='target'>Due by: ${newDate}</h6>
                <input id='updateDate' placeholder='Date'>
            </div>
            <div class='card-footer par'>    
                <h6 class='target'> Priority: ${tasks.priority}</h6>
                <input class='update' id='updatePriority' placeholder='Priority'>
            </div>
        </div>    
    </div>`

这是我用来切换类的 JS：

let card = $(this)
card.children('.par').children('.update').toggleClass('hidden');
card.children('.target').toggleClass('remove');

最后是我目前拥有的 CSS：

.par{
     position: relative;
}

#updateTask, #updateDate, #updatePriority{
    position: relative;   
    z-index: 999;
}

.hidden{
     display: none; 
    z-index:-999;
}

我将包含每组输入和文本的类“par”设置为相对。 然后我将输入字段设置为绝对。我尝试了许多定位和 div 重组的组合，但我无法成功地将我的输入字段堆叠在其各自的文本上。

不幸的是，JSfiddle 没有运行，因为我在我的项目中使用引导程序。

Answer 1

我们将使用每个函数，对于每个元素，我们将应用调用“toggleClass”。

$('#deck input').each(function(index, element){
 $(element).toggleClass('hidden');
});

只需从#deck 中获取所有 .target 并将其删除。

$('#deck .target').remove();

关于您的课程， .hidden display:none 会很好，但如果没有 position 属性，则不能使用 z-index 属性。 （仅适用于定位元素（位置：绝对、位置：相对或位置：固定）https://www.w3schools.com/cssref/pr_pos_z-index.asp）