Question

我试图找出为什么我的下拉列表相对于其父级的定位？有一个.Dropdown父div，其位置为：relative set。孩子＆＃34; ul＆＃34; element有位置：绝对集。但是当我尝试设置左：0;或者顶部：0;到ul元素，它到达正文的左上角而不是.Dropdown元素的左上角。

宽度：.Dropdown-list（ul）元素的100％不等于实际父元素的100％。

我有这个HTML：

<div class="Dropdown" id="Dropdown">
    <span class="Dropdown-toggle" role="button">Dropdown toggle</span>
    <ul class="Dropdown-list">
        <li class="Dropdown-item"><span class="Dropdown-caption">Choose one:</span></li>
        <li class="Dropdown-item">
            <a href="#" class="Dropdown-link Dropdown-link--active">Ipsum dsadas</a>
        </li>
        <li class="Dropdown-item">
            <a href="#" class="Dropdown-link">Dolor dasdas</a>
        </li>
    </ul>
</div>

和CSS：

.Dropdown {
    position: relative;
    width: 200px;
    min-height: 10px;
}
.Dropdown-list {
    position: absolute;
    /* top: 0; left: 0; THE RELATIVE PARENT IS NOT WORKING */ 
    margin: 0;
    padding: 0; 
    width: 100%;

    padding: 10px;
    border: 1px solid lightgrey;
    box-shadow: 0 3px 6px lightgrey;
    background: white;
}
.Dropdown-item {
    list-style: none;
}

这是我的JSFiddle

为什么不是相对于其父级的下拉列表？

0 个答案: