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>