本文介绍了右侧的CSS绝对位置覆盖了其他元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个div元素，它有position: absolute;。我希望它始终位于右边缘，并且不覆盖其他元素。
这是我的HTML：
.color2 {
background-color: #ff0078 !important;
color: white !important;
}
.colorW {
background-color: white;
color: black;
border: 1px #d4d4d4 dotted;
}
.condition-input {
display: inline-block;
padding: 3px 7px;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
font-size: 0.9em !important;
width: 180px;
height: 19px;
background-color: #fff200;
color: black;
}
.condition-button-group {
position: absolute;
right: 12px;
}<div>
<span class="badge color2">Height</span>
<span class="badge colorW">==</span>
<input type="text" class="form-control condition-input" />
<div class="d-inline condition-button-group">Text</div>
</div>但在页面上我看到following。我不想让"文本"覆盖输入的左边，应该有一个缩进。如何修复它？
推荐答案
如果使用绝对，则父div需要相对定位，以便绝对定位的元素在父级中是绝对的，而不是作为一个整体(或其他祖先设置为相对的)。
<div class="wrapper">
<span class="badge color2">Height</span>
<span class="badge colorW">==</span>
<input type="text" class="form-control condition-input"/>
<div class="d-inline condition-button-group">Text</div>
</div>
样式：
.wrapper{
position:relative;
}
.condition-button-group {
right:0;
top:0;
}
查看此链接：Position absolute but relative to parent
您可能需要稍微调整一下样式，才能将其准确定位在您想要的位置，但这是您尝试执行操作的途径。
这篇关于右侧的CSS绝对位置覆盖了其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！