（8）前端-初识HTML与CSS-定位布局

最新推荐文章于 2024-07-15 22:38:11 发布

将子

最新推荐文章于 2024-07-15 22:38:11 发布

阅读量83

点赞数

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_45580592/article/details/120291955

版权

前端专栏收录该内容

23 篇文章 3 订阅

订阅专栏

本文详细介绍了HTML与CSS中的五种定位方式：静态定位、相对定位、绝对定位、固定定位和粘滞定位。静态定位保持元素在默认文档流中；相对定位在原有位置基础上偏移；绝对定位脱离标准流，相对于最近的定位祖先元素定位；固定定位始终相对于浏览器窗口定位；粘滞定位结合相对和固定定位特性，当元素滚动超过特定偏移值时固定。z-index属性用于控制定位元素的覆盖关系。

摘要由CSDN通过智能技术生成

（8）前端-初识HTML与CSS-定位布局

定位流分类

静态定位
相对定位
绝对定位
固定定位
粘滞定位
z-index

1、静态定位

postion:static;

默认定位方式，将元素定位在默认文档流中。

2、相对定位

postion:relative;

相对于自己以前在默认文档流的位置移动，使用top,right,bottom,left来控制。

注意点

相对定位不脱离默认文档流，占据原来空间
由于不脱离默认文档流，因而区分块级元素/行内元素/行内块级元素
同一个方向上的定位属性只能使用一个
给相对定位的元素设置margin/padding等属性的时会影响到默认文档流的布局

应用场景

用于元素位置的微调
配合绝对定位来使用

3、绝对定位

position: absolute;

相对于body来定位

确定绝对定位的参考点

默认情况下，所有绝对定位的元素, 无论有没有祖先元素, 以body作为参考点。
如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流（除了静态定位）的那个祖先元素作为参考点。
如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

注意点

绝对定位脱离标准流，因而不占据原有空间
也不区分块级元素/行内元素/行内块级元素
如果一个绝对定位的元素是以body作为参考点, 是以网页首屏的宽度和高度作为参考点, 而非以整个网页的宽度和高度作为参考点
一个绝对定位的元素会忽略祖先元素的padding

应用场景

子绝父相

相对定位元素弊端：会占据原有空间，不利于布局

绝对定位元素弊端：会以body作为参考点，会随着浏览器的宽高的变化而变化

而当子元素用绝对定位, 父元素用相对定位时，可以很好的布局

绝对定位元素的水平居中

left:50%;
margin-left: 元素宽度的一半px;

4、固定定位

position: fixed;

让某元素不随着滚动条的滚动而滚动

注意点

脱离标准流的, 不会占用标准流中的空间
也不区分行内/块级/行内块级

5、粘滞定位

position: sticky;

结合了相对定位和固定定位两种定位功能于一体的特殊定位，当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    div:nth-child(3) {
      width: 200px;
      background-color: aqua;
      position: sticky;
      /*向下滑动滚动条，当sticky元素到达距离相对定位的元素顶部60px的位置时固定，不再向上*/
      top: 60px;
      /*` top,bottom,right,left 之一即可 */
    }
  </style>
  <body>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
</body>

滑动前

向下滑动一定距离后

注意点

不脱离文档流，占据原来的空间

使用条件

父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效

6、z-index

默认情况下所有的元素都有一个默认的z-index属性, 取值是0，其作用是专门用于控制定位流元素的覆盖关系
默认情况下定位流的元素会盖住标准流的元素
默认情况下定位流的元素后面编写的会盖住前面编写的
如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点—从父现象

如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上

如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
谁就会显示在上面

将子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（8）前端-初识HTML与CSS-定位布局

（8）前端-初识HTML与CSS-定位布局定位流分类静态定位相对定位绝对定位固定定位粘滞定位z-index1、静态定位postion:static;默认定位方式，将元素定位在默认文档流中。2、相对定位postion:relative;相对于自己以前在默认文档流的位置移动，使用top,right,bottom,left来控制。注意点相对定位不脱离默认文档流，占据原来空间由于不脱离默认文档流，因而区分块级元素/行内元素/行内块级元素同一个方向上的定位属性只能使用一个
复制链接

扫一扫