如何在CSS中相对于单独的元素定位一个元素

Question

我正在尝试制作一组​​按钮，每个按钮下面都有一个复选标记。我试图找出如何将每个复选标记置于每个按钮下方。

以下是显示代码的小提琴的链接：https://jsfiddle.net/Hydropotamus/sn5xxLdq/2/

我目前的思路是，我必须在我的复选标记类中使用相对位置，如下所示：

.checkmark{
    position: relative;
    width: 8px;
    height: 20px;
    border: solid #bdbdbd;
    border-width: 0 3px 3px 0;
    padding-left:0px;
    margin-left:13px;
    transform: rotate(45deg);
}

但是，我不确定如何使用相对位置来正确定位复选标记。

非常感谢任何建议或提示！

Answer 1

将每个按钮分组为自己容器中的复选标记是最简单的方法。

＆＃13;

＆＃13;

body {
    margin:0;
}
.fixedBar {
    position: fixed;
    left:0%;
    top: 0%;
    width:100%;
    padding:15px 15px;
    background-color:#003c0c;
    z-index: 6;
}
.moving-background {
    padding-top:70px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    width:100%;
    background-color:#003c0c;
}
.checkmark {
    position: relative;
    width: 8px;
    height: 20px;
    border: solid #bdbdbd;
    border-width: 0 3px 3px 0;
    padding-left:0px;
    margin-left:13px;
    transform: rotate(45deg);
    margin: auto;
}
.container-buttons {
    padding-right:0px;
    padding-left:0px;
    margin-right:0px;
    margin-left:0px;
}
.button_wrap {
    display: inline-block;

}

＆＃13;

<div class="fixedBar">
    <div>
        <input placeholder="Search for..." style="background-color:#fff" class="form-control" type="text" ng-model="searchValue" ng-change="onChange(searchValue)">
    </div>
</div>
</br>
<div class="moving-background">
    <div class="container-buttons">
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('all')">All</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('room')">Room</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('floor')">Floor</button>
            <div class="checkmark"></div>
        </div>
        <div class="button_wrap">
            <button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('building')">Building</button>
            <div class="checkmark"></div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;