CSS定位

先记录一下之前没用过的background图片

background: url('img/flower.jpg');
background-size: contain;

background-size有auto, contain, cover三种,其中contain可以正常显示,cover会拉伸图片,可以看一下对比

cover contain

相对定位

坐标点位于左上角,一个没有体积的点,相当于移动了点,就移动了块,
relative相对于自己之前本应该在的位置
无论发生什么偏移,原来的位置仍然存在,可以再后面的绝对定位中,对比加深理解
用一个例子展示一下,初始状态如下,我们让花向左下角移动

相应代码

    position: relative;
    left: 80px;
    top: 80px;

left,top是距离左侧,距离顶部多少多少像素

绝对定位

先看一个示例,我们在AB之间加一个花,并且加一个背景颜色

此时body内代码结构如下

<div class="bg">
    <div class="flower-red"></div>
    <div class="block-1">A</div>
    <div class="flower-yellow"></div>
    <div class="block-2">B</div>
    <div class="block-3">C</div>
</div>

然后更改一下黄花的定位(注意此时画的颜色和上面相对定位的不一样了)

.flower-yellow{
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    background: url('img/flower.jpg');
    background-size: contain;
    position: absolute;
}

变成如下,注意黄花和B是同时存在的,如果黄花是免扣的图效果会更明显.

我们通过一下两张图片再来解释一下

现在我们将黄花向右移动,移动到红花的右下角,但是会出现问题,如下图红色部分

写绝对定位时,父级元素需要是绝对定位或者相对定位,此时我们需要将flower-yellow的父级元素bg修改为如下:

    position:relative

此时便会发现已经正常移动

如果父级元素不是两者之一,会以父级的父级元素,直到body为止,刚才出现错位的原因是body有白边,可以通过调整body的的margin来去除白边
body的白边

此时如果去掉bg中的position,也是没有白边的了.