设为首页 | 收藏本站欢迎来到!

CSS 定位详解

作者:admin      来源:admin      发布时间:2020-11-11

CSS 有两个最重要的根本特点,前端开发有必要把握: display 和 position 。

display 特点指定网页的布局。两个重要的布局,我现已介绍过了: 弹性布局 flex 和 网格布局 grid 。

本文介绍十分有用的 position 特点。我期望经过10分钟的阅览,协助我们轻松把握网页定位,说清楚浏览器怎样核算网页元素的方位,尤其是新引入的 sticky 定位。

本文由国内最大的在线教育渠道之一 讲堂 资助。他们现在启动了 讲堂101方案 ,推行渠道上的课程资源,有不少优质内容。期望进步前端技能水平的同学,能够留心一下本文结束的免费课程信息。

position 特点用来指定一个元素在网页上的方位,一共有5种定位方法,即 position 特点主要有五个值。

static
relative
fixed
absolute
sticky

下面就顺次介绍这五个值。最终一个 sticky 是2017年浏览器才支撑的,本文将要点介绍。

static 是 position 特点的默许值。假如省掉 position 特点,浏览器就以为该元素是 static 定位。

这时,浏览器会依照源码的次序,决议每个元素的方位,这称为 正常的页面流 。每个块级元素占有自己的区块,元素与元素之间不发生堆叠,这个方位便是元素的默许方位。

留意, static 定位所导致的元素方位,是浏览器自主决议的,所以这时 top 、 bottom 、 left 、 right 这四个特点无效。

relative 、 absolute 、 fixed 这三个特点值有一个共同点,都是相对于某个基点的定位,不同之处只是在于基点不同。所以,只需理解了它们的基点是什么,就很简略把握这三个特点值。

这三种定位都不会对其他元素的方位发生影响,因而元素之间或许发生堆叠。

relative 表明,相对于默许方位进行偏移,即定位基点是元素的默许方位。

它有必要调配 top 、 bottom 、 left 、 right 这四个特点一同运用,用来指定偏移的方向和间隔。

div {
 position: relative;
 top: 20px;
}

上面代码中, div 元素从默许方位向下偏移 20px 。

absolute 表明,相对于上级元素进行偏移,即定位基点是父元素。

它有一个重要的约束条件:父元素不能是 static 定位,不然定位基点就会变成整个网页的根元素 html 。别的, absolute 定位也有必要调配 top 、 bottom 、 left 、 right 这四个特点一同运用。

/*
 HTML 代码如下
 div id= father 
 div id= son /div 
 /div