我远离 CSS 大师，并且在尝试从顶部的容器中拖动元素时遇到问题：固定到页面的主要内容。它只是向下滚动顶部容器，而不是拖入主要内容。它很难解释，所以我做了一个小提琴：
如您所见，您不能将任何元素从顶部拖到页面的主体中。另外，在实际页面中，顶部有很多元素，所以我需要保持水平滚动条。任何帮助表示赞赏！
谢谢！
这也是小提琴的代码：
HTML：
<div class="fieldSectionContainer">
<div class="fieldSection">
<ul id="fieldList">
<!-- have loop here -->
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
</ul>
</div>
</div>
<div style="margin-top:100px">
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
</div>
CSS：
.fieldClass {
display:inline-block;
background-color:white;
border-radius:4px;
width:200px;
margin:5px 5px;
padding: 1px 1px;
text-align:center;
border:1px solid black;
}
.fieldClass:hover {
cursor:move;
}
.fieldSectionContainer {
overflow-y:hidden;
overflow-x:auto;
position:fixed !important;
top:0;
width:100%;
height:100px;
}
.fieldSection {
height:100px;
width:2500px;
font-size:10px;
}