Web前端基础笔记：第八章 CSS-定位（一）

本文链接：https://blog.youkuaiyun.com/weixin_44980720/article/details/109572218

本文详细介绍了CSS中的定位技术，包括static、relative、absolute、fixed和sticky的用法。static遵循文档流，relative在保持原有位置基础上进行偏移，absolute相对于最近的非static祖先元素定位，fixed定位在屏幕视口，而sticky实现元素的粘性定位效果。同时，文章还提到了z-index在定位中决定图层优先级的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8.1 Position-static（默认定位）

static遵循默认的文档流布局，top、left、right、bottom属性都无效
position除了static属性值外，还有4个常用值，分别为
relative（相对定位） absolute（绝对定位）
fixed（固定定位） sticky（粘性定位）

8.2 Position-relative（相对定位）

relative先遵循默认的文档流布局也就是上一文说的static布局，然后再在不改变页面布局的前提下根据left、right、top、bottom调整次元素的位置。
也就是left、right、top、bottom的调整都是相当于当前元素static布局位置进行的调整。

8.3 Position-absolute（绝对定位）

absolute（绝对定位）和relation（相对定位）的区别，relation是相对自己进行top、left、right、bottom进行偏移，而absolute是寻找最近的非static的祖先节点进行偏移。
cursor：pointer；这个可以让我们鼠标停在元素上，变成可点击的形状。

举例
1.首先我们获取到第一张图片元素 <img class="first" src="xxx"/>，我们发现它是absolute布局

2.因此寻找它的父亲节点<div class=" img-box">，我们发现此元素并未配置position属性，其遵循默认布局position=static,并不符合非static要求。

3.因此继续找<div class="img-box">的父亲节点，找到<body>

4.<body> 已经没有父亲节点了。所以按照<body>的位置为标准进行偏移

8.4 Position-fixed

fixed为固定定位。固定定位和绝对定位类似，但元素的包含块为屏幕视口。固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来制定元素位置。元素位置在屏幕滚动时不会改变。
z-index：决定图层优先级
1、默认非static元素的z-index都为0
2、z-index越大，则越在最上面，离观察者越近
3、同样的z-index，在html中的元素越靠后，则越在最上面，离观察者越近。
4、非static元素，z-indeex都为0

8.5 Position-大作业

效果预览
在这里插入图片描述

<!DOCTYPE html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>优课达</title>
</head>
<body>
  <h1 class="title">MOUNTAIN</h1>
  <p>
    The Facebook post was heartfelt. We like our little town just as it is:
    Little. Homey. Just us’ns.
  </p>
  <div class="img-box">
    <div class="item">
      <img
      class="first"
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
      />
      <span>图片1</span>
    </div>
    <div class="item">
      <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
      />
      <span>图片2</span>
    </div>
    <div class="item">
      <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
      />
      <span>图片3</span>
    </div>
    <div class="item">
      <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
      />
      <span>图片4</span>
    </div>
    
  </div>
  <h2>LISTEN</h2>
  <p>
    Listen, I can empathize. As someone who’s lived in the Denver area since
    1971 — right about the time John Denver’s songs were enticing folks to move
  </p>
  <footer></footer>
</body>

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}
.item{
  position: relative;
}
.item > span{
  position: absolute;
  font-size: 20px;
  color: yellow;
  top: 10px;
  right: 10px;
}