第十章 定位

2020-11-28  本文已影响0人  扶光_

一,相对定位

写法 :position:relative;
位置 + 参照物
参照物 = 本身

但是我们单纯的给元素设置position:relative;元素是无法进行移动的,还要设置移动属性才可以进行移动.

移动属性
left
right
top
bottom


相对定位的特性

1. 相对自身位置发生移动,元素保留初始位置

首先我们先设置两个盒子:第一个粉盒子添加相对定位然后进行向左200px移动,第二个盒不添加定位,

原始状态
粉盒子200px
这就是相对定位的第一个特性:相对自身位置发生移动,元素保留初始位置
2. 不会脱离文档流,会漂浮
例2
3.支持margin
4不会影响元素本身特性

二,绝对定位

写法:position:absolute;
位置 + 参照物
参照物 = 根据祖先元素是否设置了相对定位来进行移动,如果祖先元素没有设置相对定位,就根据浏览器窗口进行移动

上面这个参照物是什么意思呢?我来解释一波
我们还是先设置一个不添加定位的粉盒子


未添加定位

然后我们将粉盒子设置绝对定位并设置bottom:0px,left:0px.此时我们可能会认为盒子应该在这个红盒子左下角,下面我们来看看是不是这样.

添加绝对定位
结果并不是这样这就是上面所说的根据祖先元素来进行定位

绝对定位的特性:

1.完全脱离文档流,不保留初始位置

例4
2.会转换成块元素(相当于使用display:block) 支持margin,不支持auto
.first .second{
        width: 50px;
        height: 50px;
        background-color: pink;}
 <span class="second">
            盒子
        </span>

我们都知道span元素是行内元素,并且不支持宽高的.而使用绝对定位会将元素转换成块级元素,看下图

例5
3. 父相子绝

什么是父相子绝?

如果我们想要盒子在我们想要的位置进行移动并且不会影响布局,我们就需要在父级添加一个相对定位。
后写覆盖前面(是看html的结构顺序)

    .first .second{
        width: 50px;
        height: 50px;
        background-color: pink;                    第一个盒子是粉色的
        position: absolute;
        left: 0px;
        top: 0px;
    

    }
    .first .three{
        width: 50px;
        height: 50px;
        background-color: green;                   第二个盒子是绿色的
        position: absolute;
        left: 0px;
        top: 0px;                                         下面我们来猜猜是哪个盒子在上面呢?
     
    }
        <div class="three">
            2
        </div>
        <div class="second">
           1
        </div>
例6
是粉盒子,为什么呢?
因为他是看html的顺序先后的,而不是css样式的顺序先后

三,固定定位

写法:position:fixed;
位置 + 参照物
参照物 = 浏览器窗口

特性:

    1.以浏览器窗口进行定位,不会随内容进行滚动
    2.脱离文档流,不会占据初始位置

这里的两个特性图片演示的效果不明显。
给大家举一个都知道的例子。就是在我们电脑桌面右下角经常会出现弹窗广告,不管我们怎么滑动页面广告一直都在右下角不动,例如:屠龙宝刀,一刀9999。就是用这个固定定位来做的


四,粘性定位

写法:position:sticky;
位置 + 参照物
参照物 = 自身

特性:

    1.父元素不能使用auto 
    2.被限制在父级元素之内 
    3.能感知到浏览器的顶部,就不会滚动 

五,层级问题

层级

写法:z-index:1;

   数字越大层级越高
    z 表示我们的z轴
    只对 relative absolute fixed static sticky 有效
    默认样式是:auto;

六,居中

怎么使盒子水平垂直居中
1

给父级添加position:relative;
子级设置position:absolute;上下左右都为0,再加一个margin:auto;


上一篇下一篇

猜你喜欢

热点阅读