秒懂！！CSS定位举例属性详细阐述

最新推荐文章于 2023-09-07 11:44:09 发布

i_da_bai

最新推荐文章于 2023-09-07 11:44:09 发布

阅读量222

点赞数 1

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

本文链接：https://blog.csdn.net/IT_dabai/article/details/110490127

版权

前端专栏收录该内容

37 篇文章 4 订阅

订阅专栏

position属性

定位有四种！定位有四种！定位有四种！重要的事情说三遍！
写得较繁琐，不过一步步看下去绝对能懂

static 没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

static（默认值）：没有定位

因为这是position属性默认的值，所以大家经常会忘记这个值
演示：
不设置定位，最初的HTML代码与对应的CSS代码以及最初的运行图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/position.css">
</head>
<body>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

.div1 {
  height: 50px;
  background-color: red;
}

.div2 {
  height: 50px;
  background-color: aqua;
}

.div3 {
  height: 50px;
  background-color: blueviolet;
}

在这里插入图片描述

relative：相对定位

没有脱离文档流，相对于没有定位前的位置，进行偏移
演示：
对div2设置相对定位，并展示设置后的运行图

.div2 {
  position: relative; /*相对定位*/
  top: 20px; /*距离顶部20px*/
  height: 50px;
  background-color: aqua;
}

在这里插入图片描述

运行后的效果为div2相对于没有定位前的位置，向下移动20px并遮挡住了div3的部分区域，说明了相对定位没有脱离标准文档流，div2原来所占据的位置依旧存在。

absolute：绝对定位

脱离文档流，后面的元素会向上补齐，覆盖块级元素（或行内元素）
本质：元素会隐性变成inline-block（行内块级元素）
原理：相对于离它最近的已定位的“祖先”元素。如没有定位的“祖先”元素，就以初始可视窗口为准，进行设置

演示1：
对div2设置绝对定位，并展示设置后的运行图

.div2 {
  position: absolute; /*绝对定位*/
  top: 20px;
  height: 50px;
  background-color: aqua;
}

在这里插入图片描述
运行后的效果为，div2脱离了标准文档流，原来占据的位置消失，元素变为inline-block（行内块级元素），因为这里相对于div2来说，没有找到它的”祖先元素“设置过定位，所以它设置绝对定位后的位置是相对于可视窗口的顶部，向下移动了20px。

演示2：
对div2设置绝对定位，并对其父元素div4设置相对定位

<body>
  <div class="div1">div1</div>
  <div class="div4">
    <div class="div2">div2</div>
  </div>
  <div class="div3">div3</div>
</body>

.div2 {
  position: absolute; /*绝对定位*/
  top: 20px;
  height: 50px;
  background-color: aqua;
}
.div4 {
  position: relative;
  height: 90px;
  background-color: chocolate;
}

在这里插入图片描述
运行后的效果为，div2脱离了标准文档流，原来占据的位置消失，元素变为inline-block（行内块级元素），因为这里相对于div2来说，能够找到它的”祖先元素“设置过定位，如上面代码块所示，对其父元素div4设置了相对定位（当然并不是只能对它的父元素进行定位设置，如果你对其父元素不进行定位设置，而是对其”祖先“元素进行定位，那么div2会找离它最近的已定位的“祖先”元素，最后就会有不同的效果），所以这里它设置绝对定位后的位置是相对于div4的顶部，向下移动了20px。

fixed：固定定位

脱离文档流
原理：相对于浏览器的边框，进行定位

演示：
单独对div2设置固定定位

.div2 {
  position: fixed; /*固定定位*/
  right: 20px;
  height: 50px;
  background-color: aqua;
}

在这里插入图片描述

运行后的效果为，div2脱离了标准文档流，原来占据的位置消失，元素变为inline-block（行内块级元素），并与窗口右边距离为20px。
（设置了固定定位后，相对于浏览器的边框，进行定位）

i_da_bai

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
秒懂！！CSS定位举例属性详细阐述

position属性定位有四种！定位有四种！定位有四种！重要的事情说三遍！演示：最初的HTML代码与对应的CSS代码以及最初的运行图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/position.css">&lt
复制链接

扫一扫

专栏目录