千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > Css定位

Css定位

来源:千锋教育
发布人:qyf
时间: 2022-09-30 14:50:00 1664520600

  在css众多属性中,定位position属性,必须有姓名,而且占据了比较重要的地位,比如:二级,三级导航效果,鼠标悬停的一些动态效果,悬停栏,侧边导航栏定位效果等等都是需要定位实现的。

  但是很多小伙伴,刚接触定位的时候,理解上会有一些困惑,使用上容易出bug,那我们今天就来聊一下定位position属性;

  1、定位的历史

  W3C(万维网联盟)组织于1998年5月发布了CSS2版本,CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性(和伪元素),以及现有属性的很多附加值,其中就包括 定位属性。

  2、浏览器的支持

  所有主流浏览器都支持 position 属性。

  3、position属性的语法

  position 属性:规定元素的定位类型

  属性值:

  static:默认值。没有定位,元素出现在正常的流中。

  relative:生成相对定位的元素,相对于其正常位置进行定位。

  fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位。

  absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

  sticky (css3中新增的属性值): 粘性定位,该定位基于用户滚动的位置。

  4、定位需要配合使用的属性

  left 属性:规定元素的左边缘偏移的大小。

  right 属性规定元素的右边缘偏移的大小。

  top 属性规定元素的顶部边缘偏移的大小。

  bottom 属性规定元素的底部边缘偏移的大小。

  以上属性用于给元素定位设置坐标点的位置;

  属性值:

  auto: 默认值。通过浏览器计算左边缘的位置。

  %: 设置以包含元素的百分比计的左边位置。可使用负值。

  length: 使用 px、cm 等单位设置元素的左边位置。可使用负值。

  5、了解编程中的坐标

  · 编程中的坐标,x轴-水平轴右为正,左为负,Y轴-垂直轴下为正,上为负

1

  · 每个元素都自带一个坐标系,元素左上角的位置为原点(0)位置,如下图所示

2

  6、 分别介绍定位属性每个属性值的使用语法

  · position:static 静态定位

  position属性的默认值,即没有定位,遵循正常的文档流对象。

  遵循正常的文档流对象,可以理解为,元素的位置根据在html中的书写顺序依次排序显示,没有特殊的位置改变

  · position:relative 相对定位

  生成相对定位的元素,相对于其正常位置进行定位。

  基本使用讲解:

  例如:一个img元素在没有设置定位时,正常显示在浏览器中,自带坐标系,

  如图显示;

3

  给img元素设置相对定位,设置定位的坐标为(100px,100px),美女的位置会从原本原点的位置移动到(100px,100px)的位置,会发生如下变化:

4

  代码实现如下:

01

  相对定位对元素在文档流中的影响

  元素仍然保持其未定位前的形状,它原本在文本流中所占的空间仍保留

  例如:在img标签下面书写一个span标签,img在定位之后,原本的位置空间依旧是保留在文本流中的,写在img下面的span是没有上去的;

  代码实现如下:

02

  效果如下:

6

  · position: absolute 绝对定位

  生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。

  解释:指绝对定位元素会根据有定位设置(除static定位)的父元素作为参照进行定位;如果父元素没有定位设置,那就继续向上找祖父元素,看是否有定位设置,有的话就根据祖父元素定位,没有的话,那就继续向上找…….如果都没有,就根据html进行定位。

  包含块:绝对定位元素参照的有定位设置的父元素我们称为包含块,包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物;

  设置某个元素为包含块:给此元素添加relative,fixed,absolute都可,推荐使用relative,因为不会影响元素在文本流中的显示;

  总结元素绝对定位三部曲:

  · 先确定其包含块

  · 设置元素绝对定位

  · 定位的位置

  基本使用讲解:

  例如:img元素放在div中,没有设置定位效果

  代码实现如下:

  HTML:

0

  CSS:

  div {

  width: 400px;

  height: 400px;

  border: 10px dashed coral;

  margin: 100px;

  }

  显示效果如下:

7

  然后给图片设置绝对定位,代码如下:

  img {

  position: absolute;

  left: 0;

  top: 0;

  }

  分析:img的父元素是div,从上述代码中,可以看出div没有定位设置,不能作为img的包含块,一依次向上是body,body也没有定位设置,再向上就是html,所以img会根据html进行定位,定位到离包含块左边0,上边0的位置定位,也就是左上角位置;

  效果如下:

8

  如果想让img根据div盒子进行定位,div需要有除static之外的定位设置;成为一个包含块,代码如下:

  div {

  width: 400px;

  height: 400px;

  border: 10px dashed coral;

  margin: 100px;

  /* position:absolute relative fixed都可以让一个元素成为包含块 */

  position: absolute;

  }

  img {

  position: absolute;

  left: 100px;

  top: 100px;

  }

  效果如下:

9

  绝对定位对元素在文档流中的影响

  给元素设置绝对定位之后,元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样;

  例如:在img下面添加了一个p标签,并且没有给img设置绝对定位,此时img和p会根据书写顺序,从上向下依次显示,代码如下:

  Html:

01

  Css:

  * {

  margin: 0;

  padding: 0;

  }

  div {

  width: 400px;

  height: 400px;

  border: 10px dashed coral;

  margin: 100px;

  }

  p {

  background: lemonchiffon;

  }

  效果如下:

10

  当给img设置绝对定位之后,img在正常文档流中所占的空间会关闭,img不在占据原来的空间;p标签就会当img不存在一样,显示在div最开始的位置:

  代码如下:

  Html:

03

  Css:

  * {

  margin: 0;

  padding: 0;

  }

  div {

  width: 400px;

  height: 400px;

  border: 10px dashed coral;

  margin: 100px;

  /* position:absolute relative fixed都可以让一个元素成为包含块 */

  position: relative;

  }

  img {

  position: absolute;

  left: 100px;

  top: 100px;

  }

  p {

  background: lemonchiffon;

  }

  效果如下:

11

  · 固定定位 position:fixed

  生成固定定位的元素,相对于浏览器窗口进行定位。

  基本使用讲解

  元素设置固定定位之后,相对窗口进行定位,不会根据浏览器滚动条的滚动而移动位置,代码如下:

  结构:内容比较多,让浏览器可以出现滚动条

04

  效果如下:

12

  给图片添加固定定位;代码如下:

05

  效果如下:

13

  固定定位对元素在文档流中的影响

  给元素设置固定定位之后,元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样(参照上图看效果);

  sticky 粘性定位

  css3中新增的属性值,有兼容问题,ie低版本浏览器不支持

  粘性定位,元素在浏览器范围内定位时就像 position:relative; 而当页面滚动超出目标区域时,它的定位效果就像 position:fixed;,它会固定在目标位置。

  基本语法讲解

  例如:给img元素设置粘性定位,代码如下:

06

  css代码:

07

  效果如下:

14

  元素设置绝对定位、固定定位后,会生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  例如: span默认为行内元素,给其设置绝对定位,观察其生成的块级框效果,代码如下:

  Html:

08

  Css:

09

  效果如下:

15

  以上是对position属性语法的基本讲解,其实position在实际开发中,有很多灵活的使用方式,下次我们写一个比较有趣的案例,给大家展示定位在实际项目中的灵活应用。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT