将 Div 定位在屏幕顶部时遇到错误答案

【问题标题】：Facing Error in positioning the Div on top of the screen将 Div 定位在屏幕顶部时遇到错误
【发布时间】：2021-01-22 09:05:19
【问题描述】：

Image

嗨，我希望读到这篇文章的人身体健康，精神饱满。我在定位 div 时遇到了一些困难。我希望突出显示的 div 的建议框位于水平滚动的顶部。我正在研究 React Js。我在这里添加我的代码。我真的很感谢你的帮助。谢谢

     <td>
                <div
                      style={{
                        width: "125px",
                        marginTop: "0px",
                        marginLeft: "5px",
                        marginRight: "5px",
                      }}
                    >
                    <div style={{position:"relative"}}>
                           <div
                id={"myAutocompleteParentDiv" + this.props.id}
                style={{
                  width="100%";
                  position="relative"
                }}
              >
               <input class="provider-form" autocomplete="off" id="myAutocompleteID" type="text" name="searchValue" placeholder="" value="" style="margin-left: 0px;">
    <span style="position: relative; right: 35px; top: 5px;">
<i class="my-autocomplete-search-icon"></i>
</span>
    <div id="myAutocomplete-list-cptCode0" class="myAutocomplete-items" style="max-height: 190px; overflow-y: scroll; background-color: white; width: 125px;">
<div title="searchValue" id="undefined">
<strong>822</strong>32<input type="hidden" value="82232">
</div></div>
    </div>
    
                    </div>
               </div>
            </td>

【问题讨论】：

标签： html css reactjs responsive-design css-position

【解决方案1】：

您可以将z-index 属性添加到您想要提升到顶部的元素。在您的屏幕截图中，我无法判断它是在框架还是 iframe 中。如果它在一个框架中，无论你在 CSS 上做什么技巧，元素都不会在它自己的框架之外呈现。另一个可能的问题是元素被裁剪，在这种情况下您可能需要设置overflow 属性。

参考：

【讨论】：