css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解

说到定位就要用到 position 属性我们有四种不同的属性值
1.static
静态定位:使用静态定位时,元素处于普通流中,和未添加的元素一样处在最底层。
2.relative
相对定位:是相对于该元素在普通流时的位置
元素仍保持其未定位前的形状,它原本所占的空间仍保留
就拿这三个div做比喻(这里就不给css代码了)

 

给son2(蓝色div)添加相对定位

  position: relative;

css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第1张图片
可以看到三个div还是和以前一样排列,我们给蓝色div继续添加top和left属性

 position: relative;
            top:50px;
            left: 50px;

css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第2张图片
可以看到蓝色div以原位置左顶点进行偏移。
众所周知定位有4个设置偏移量的属性,分别是:[left,right,top,bottom]
那我们来给蓝div添加一下

 position: relative;
            top:50px;
            left: 50px;
            right: 100px;
            bottom: 100px;

css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第3张图片
可以看到right和bottom没有任何效果
可是当我们在开发者模式中经left和right关闭
css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第4张图片
**此时right和bottom是有效的,所以这几个属性top和bottom,left和right不要同时出现,你要么左上,右下,不要上下一起来,上和左是优先于下和右的。
**
3.absolute
**绝对定位:**让元素脱离普通流,它会相对于顶级元素 body 定位。
还是那三个div,给蓝色div添加绝对定位

  position: absolute;

css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第5张图片
蓝块脱离了普通流,但红块未改变,独占一行,蓝块在原位置浮了起来,绿块因为蓝块浮了起来,向上补充了蓝块的位置,并且被蓝块覆盖。所以呈现了只有红蓝方块的效果

这个时候我们给蓝块添加left和top

  position: absolute;
            top: 50px;
            left: 50px;

效果:css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第6张图片
蓝块相对于body的左顶点进行偏移。
那么我们想要让蓝块相对于父元素定位要怎么办呢?
可以使用子绝父相的方法,我们给蓝块的父元素添加一个相对定位:

position: relative;

效果
css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第7张图片
此时的蓝块就相对于父元素进行偏移了

注意

若我们把父元素的相对定位去掉,给父元素套一个父元素,并设置相对定位:
我们看一下效果:
css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第8张图片
这也就是“有奶便是娘”
4.fixed
**固定定位:**固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。常用于网页右下角回到到顶部。

关于子绝父相定位

自绝父相不是去找最近的一个设置了相对定位的父级元素,如果父元素设置了绝对相位他也可以根据该父元素设置位置,(父元素设置绝对和相对都可以)

猜一猜

今天做了一道题做错了,分享给大家:
还是那三个div(红,蓝,绿),设置定位,绝·相·绝
大家猜一下最后会有什么效果?
**

具体代码如下:

//css部分

    //html部分
    

思路:红块设置了绝对定位所以它脱离了标准流;那么后面的蓝块和绿块就会上来补它的空位,然后蓝块设置了相对定位,但他原本空间还是保留,所以后面绿块在进行绝对定位时就不会跑到上面而是在第二行浮动。
那么问题来了?
此时页面是上红下绿,还是上蓝下绿,这个今天我学到了,相对定位的图层级别高于绝对定位的级别。
所以效果如下:
css4种定位方式(静态定位,相对定位,绝对定位,固定定位)详解_第9张图片
呈现了蓝上绿下状态。

你可能感兴趣的:(html/css/js,css)