首页 > 代码库 > HTML利用posotion属性定位 小技巧
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属性定位 小技巧
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。