标签输入 - 将div放在输入的顶部

Question

我是一名新开发人员，我正在尝试创建一个标签输入 - 有很多解决方案（插件等）但我想尝试用html / css这样做，如果我可以从这一点开始。如何在输入的顶部输入 输入标签？无论如何将它们放在输入的顶部，而没有弄乱输入值？

<div class="edit">
<div class="filter-tags-cloud" ng-show="editMode" style="float:left;">
    <div ng-repeat="filterTag in tags track by $index" class="filter-tag">
        <div class="btn-group btn-group-filter">
            <span class="btn btn-filter-tag filter-truncate">{{filterTag}}</span>
            <span class="btn btn-filter" ng-click="vm.removeTag($index)">
                <span ng-click="removeTag($index)" class="fa fa-times"></span>
            </span>
        </div>
    </div>
</div>
<div id="input" style="float:right;">
    <input type="text" ng-show="editMode" class="edit" ng-model="frontSeal.selected" ng-keydown="checkEvent($event)"/>
</div>

现在的样子：

我希望带有过滤器标签的跨度位于输入内部或至少显示为。

Answer 1

也许这个帮助，请尝试在你的css中添加它

.filter-tags-cloud {position:relative; top:10px;}

这可以从“当前位置”的“filter-tags-cloud”顶部推送