HTML新手入门之定位样式

当我们在进行页面布局的时候可能会遇到一种情况，某一个图片或icon 文字之类的需要放到特定的位置时候，margin和padding都不好使了，float也做不到了，那么此时我们该如何去实现它呢？
这时候就到了position（定位样式）该出场的时候了。
就比如下图中搜索框中的放大镜一样的图标，

1.jpg

那么该如何用呢？
别急，在用之前我们需要先了解一下它的属性：
1. position：static 默认，静态，⽆特殊定位（这个不常用）
2. position：absolute 绝对定位（这个就很常用了）
这个属性是给子元素使用的，也就是你想要移动的那个东西，通过调节上下左右（top/bottom/left/right）四个方向属性来使用

.icon {
            position: absolute;
            top: 27px;
            right: 130px;
        }

它是相对于具有定位属性的父元素来进行位移定位的,以⽗元素左上⾓为基准设置位置，如果⽗元素未设置定位，则以浏览器左上⾓为基准
absolute可以通过z-index数值进行层叠定义，且不占空间位置
3. position：relative 相对定位（可以和absolute配合使用）

这个是给父元素使用的，当它没有子元素时是以⾃⾝的位置为基准设置位置，有子元素时则是子元素的定位的参照物，⼀般⼦元素设置相对定位，⽗元素设置绝对定位（⽗相⼦绝），且相对定位占用空间位置

那么我们再回过头来看看上面搜索框里放大镜该怎么对他进行定位
先引入icon图标，我使用了I标签来引入，

微信图片_20190613033340.png

**然后再给它设置样式属性（这里我就随便起个名字了）

   .search {
        .whb(820px, 108px, none);
        .center;
        position: relative;

        img {
            .whb(216px, 108px, none);
            display: inline-block;
            .f-l;
        }


        .sousuo {
            position: absolute;
            top: 27px;
            right: 130px;
        }
    }

可以看见父元素为，search 给了它position: relative;，子元素是.sousuo 给了他position: absolute; 然后在通过调节top和right的值来控制图标位置

微信图片_20190613034347.png

如果我不调top和right的值呢，就让它们的值为0，会出现什么样的结果呢，可以看下图

.sousuo {
            position: absolute;
            top: 0px;
            right: 0px;
        }

结果如下

微信图片_20190613034815.png

icon图标在右上角

4. position:fiexd 固定定位

相对于整个浏览器窗口定位，一直固定在那个位置，无论你怎么滑动网页，它依然坚挺的在那里岿然不动，最常见的就是网页侧边的广告栏，还有购物网站瞬间回到顶部的那个按钮。

本人学识有限文章多有不足
若有错误请大方指出以免误导他人

HTML新手入门之定位样式

推荐阅读更多精彩内容