本文主要是介绍HTML利用posotion属性定位 小技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.居中效果
父级DIV （index-top ）属性设置为 text-align:center;
子级DIV（ tabIndex-main）属性设置为 margin:0 auto;
2.左右对齐效果
父级DIV（ tabIndex-main）属性设置为 position:relative
子级DIV(city) 跟（search）属性为posotion:absolute
(absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom
等属性相对于其最接近的一个最有定位设置的父对象(position:relative)进行绝对定位。
如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义)
样式：
.index-top {font-family: "微软雅黑";font-size: 15px;color: #f85f48;background-color:#ffffff;border-bottom:1rpx solid #e5e5e5;padding:13px;text-align:center;
}
.city{position:absolute;left:0;top:0;}
.tabIndex-main{margin:0 auto;position:relative}
.tab1{border:1px solid #f85f48;text-align:center;padding:2px 15px;background-color:#f85f48;color:#ffffff;}
.tab2{border:1px solid #f85f48;text-align:center;padding:2px 15px;}
.search{position: absolute;width: 20px;height: 24px;right: 0;top: 0;/* display: -webkit-inline-box; */background-size: contain;background-repeat: no-repeat;background-image:url(图片链接太长，省略)
}
代码如下：
<div class="index-top">
<div class="tabIndex-main"> <div class="city">厦门</div><div class="tabIndex"><span class="tab1">问题</span><span class="tab2">答主</span></div><div class="search"><div></div>
</div>
这篇关于HTML利用posotion属性定位 小技巧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
