Web（四）

isWhj.ReTurN_N

已于 2022-11-19 19:51:58 修改

阅读量335

点赞数

文章标签：前端 css css3

于 2022-11-17 14:53:42 首次发布

本文链接：https://blog.csdn.net/m0_74071065/article/details/127856667

版权

本文详细讲解了CSS中的position属性，包括relative、absolute、fixed、sticky和z-index的用法及实例，同时介绍了CSS超幅文档省略号、Sprite技术以及圆角效果的实现。通过实例演示了各种定位的层级关系和实际应用，帮助读者深入理解CSS布局。

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

我们紧接上次学习的内容开启第四周的学习。

38、position定位

positon特性
css position属性用于指定的一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值
static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、stick（黏性定位）

1、relative相对定位

特性：	
	1、如果没有定位偏移量，对元素本身没有任何影响
	2、不适用元素脱离文档流
	3、不影响其他元素布局
	4、left、top、right、bottom时相对于当前元素自身进行偏移的

例如：在Vscode之中构建如下三个色块，现在让蓝色向右偏移100px，再向下偏移100px，我们该怎么办呢？
在这里插入图片描述
我们第一个想到的是不是对蓝色块利用两次margin（L:100px;T:100px）呢？但是保存后运行我们会发现：

绿色的也向下偏移了，这时我们以及可以对绿色方块进行margin-top=-100px来给他放回去，但是这样太浪费代码了。
我们在蓝色区块中输入：position:relative，并将其向左、向下移动100px，在Vscode中键入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
      width: 100px;height: 100px; background-color: red;}
        #box2{
      width: 100px;height: 100px; background-color: blue;position:relative;left: 100px;top:100px}
        #box3{
      width: 100px;height: 100px; background-color: green;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述
这样我们就完成了，并且他也同时具备刚刚描述的四个特性。

2、absolute绝对定位

特性：
		1、使内元素完全脱离文档流
		2、使内联元素支持宽高（让内联具有块的特性）
		3、使块元素默认宽根据内容决定（让块崛北内敛的特性）
		4、如果有定位祖先元素对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定那个）

例1（使元素完全脱离文档流）：

这是两个div标签，我们对如下页面加入一个absolute：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
      width: 100px;height: 100px; background-color: red;position: absolute;}
        #box2{
      width: 200px;height: 200px; background-color: blue;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

然后我们就可以看到：
在这里插入图片描述

例2（让内联元素支持宽高）：

之前我们学到了span时内联标签，所以无法对它设置宽高，但是当我们给他加入了absolute之后，他就具有了块的特性，即能够改变宽高了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    span{
     width:100px;height:100px;background: red;position:absolute;}
    </style>

</head>
<body>
    <span>这是一个内联</span>
</body>
</html>

在这里插入图片描述

例3（使块元素拥有内联标签属性。类似于之前学的浮动）：

div是快标签，但是我们加入position:absolute之后他就会拥有内联的属性，即背景色的长度由内容长度决定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
     background: red;position: absolute;}
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

在这里插入图片描述

例4（如果有定位祖先元素对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

第四个特性也是和relative区别的一个特性。
现在我们构建一个嵌套元素，我们会看到box2在box1之内
在这里插入图片描述
现在我们在box2中加入绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
     width:300px;height:300px;border:1px black solid;margin:200px;}
        #box2{
     width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>