CSS中常用的几种定位方式

定位的基本语法：

position:方式
top: 多少px;
right: 多少px;
left: 多少px;
bottom: 多少px;

有常用的几种方式，如下：

第一种：相对定位 relative

首先，相对，就是相对某一位置，这里指的是相对原来的位置，不脱离标准文档流。

那么标准文档流是什么？

就是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

我们在这里先写一个样式：

这是两个块级元素：

<div class="box1"></div>
<div class="box2"></div>

现在给他们添加简单样式：

<style>
        .box1 {
            width: 50px;
            height: 50px;
            background-color: pink;
            
            position: relative;
            top: 10px;
            left: 10px;
        }

        .box2 {
            width: 20px;
            height: 20px;
            background-color: skyblue;
        }
</style>

在不添加定位时，页面显示是这样的：

 在添加相对定位以后，页面显示是这样的：

 可以看出粉色的相对于他原来的的位置，距离顶部和左边都是10px。这就是相对定位。

第二种：绝对定位 absolute

绝对定位通常发生父子标签中，脱离标准文档流，不保留原本的位置。

这里要分为两种情况：

情况一：无父亲 或 父亲无定位

同样先写一个有父子关系的标签：

<div class="father">
    <div class="son"></div>
</div>

然后给他们添加样式：情况一父标签中没有定位

    <style>
        .father {
            margin-top: 50px;
            margin-left: 50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        .son {
            position: absolute;//绝对定位
            top: 20px;
            left: 20px;

            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>

在字标签中中没有定位时：

注意：此时父标签连带着子标签距离页面左边和顶部都有50px的距离。

在字标签中中添加有定位时：

由于直系父标签中没有定位，所以字标签会一直向上查找，直到找到有定位的父标签，这个案例中，找到的就是页面。所以它的绝对定位，是距离页面的定位，左边和顶部各相距10px.如图：

情况二：父亲有定位

还是上面情况一的案例，我们此时添加一个相对定位给父标签：position: relative，

看看会有什么变化？

        .father {
            position: relative;
            margin-top: 50px;
            margin-left: 50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

 字标签是相对于父标签的绝对定位。

第三种：固定定位 fixed

还是一样，写一个测试标签

<div class="divA">
    <img src="./img/羊驼.jpg" height="100px" width="120px">
</div>

<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>

...

//页面上写很多字 用来测试

现在给div块添加样式，加一个固定定位：

    <style>
        .divA{
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>

 这个图片的位置是固定的，就算在文字很多的情况下，也不随鼠标的滚动而变动。

这有点像我们在网页有时候会碰到的悬浮广告，或者手机上的悬浮按钮，当然没有手机那么高级，有兴趣的可以试下。

固定定位还有一个特点，就是加入别的块占了他要固定的位置，他就会环绕着这个块分布。

第四种：粘性定位 sticky

粘性定位使用时：

父元素不能overflow:hidden或者overflow:auto属性。

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

同样先写一个父子块：

<div class="nav">
    <div class="navSon"></div>
</div>

并添加样式；

    <style>
        .nav{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .nav .navSon{
            position: sticky;
            top: 20px;
            left: 20px;

            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>

页面显示的样式是：

 以上就是几种定位方式。