CSS|Position

最新推荐文章于 2022-11-08 23:30:47 发布

Alan_Lowe

最新推荐文章于 2022-11-08 23:30:47 发布

阅读量100

点赞数 2

分类专栏： # CSS 文章标签： html css html5 position

本文链接：https://blog.csdn.net/qq_45985728/article/details/119551028

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|Position

1.分类

position属性指定了元素的定位类型。

它一共有5个值：

static
relative
fixed
absolute
sticky

2.static定位

HTML元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到top，bottom，left，right影响。

3.fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
  <style>
    .fixed{
      /*fixed：元素的位置相对于浏览器固定*/
      position: fixed;
      top: 50px;
      right: 20px;
    }
  </style>
</head>
<body>

<div>
  <img class="fixed" src="../resource/image/img.png" alt="科比图片">
</div>
<div>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
</div>

</body>
</html>

我们将图片设置为了fixed：

在这里插入图片描述

当我们将滚轮往下拉时，图片的位置相对于浏览器是不会改变的：

在这里插入图片描述

它的位置与文档流无关，所以也就不会占据空间。

4.relative定位

相对原本的位置的定位，它原本所占的空间不会改变。

如我们有两个标题分别为标题1和标题2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
  <style>
    .fixed{
      /*fixed：元素的位置相对于浏览器固定*/
      position: fixed;
      top: 50px;
      right: 20px;
    }
    .relative{
      position: relative;
      left: 50px;
    }
  </style>
</head>
<body>

<div>
  <h1>标题1</h1>
  <h1 class="relative">标题2</h1>
</div>
<div>
  <img class="fixed" src="../resource/image/img.png" alt="科比图片">
</div>
<div>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
</div>

</body>
</html>

本来着两个标题的水平位置应该是一样的，但是标题2使用了relative定位，将它相对于它原来的位置向右移动了50px：

在这里插入图片描述

5.absolute定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。

6.sticky定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
  <style>
    .fixed{
      /*fixed：元素的位置相对于浏览器固定*/
      position: fixed;
      top: 50px;
      right: 20px;
    }
    .relative{
      /*relative：元素相对于它原来的位置移动*/
      position: relative;
      left: 50px;
    }
    .sticky{
      /*sticky：粘性定位*/
      position: sticky;
      /*在距离顶部0px时不动*/
      top:0px;
    }
  </style>
</head>
<body>

<div>
  <h1>标题1</h1>
  <h1 class="relative">标题2</h1>
</div>
<div class="sticky">
  <img src="../resource/image/demo01.png" alt="QQ">
</div>
<div>
  <img class="fixed" src="../resource/image/img.png" alt="科比图片">
</div>
<div>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
  这是一个段落</br>
</div>

</body>
</html>