CSS+HTML实现元素定位

r囧r小猫 2023-10-12 18:08 57阅读 0赞

### 文章目录 ###

*  相对定位 position: relative;
 *   *  总结
 *  绝对定位 position: absolute;
 *   *  总结
 *  固定定位 position: fixed;
 *   *  总结
 *  z-index样式
 *   *  总结
 *  数量角标
 *  透明度设置 opacity
 *  返回顶部

--------------------

# 相对定位 position: relative; #

**position: relative;**

【示例代码：】

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div{
 
 width: 150px;
 height: 150px;
 }
 .d1{
 
 background-color: red;
 }
 .d2{
 
 background-color: green;
 }
 .d3{
 
 background-color: blue;
 }
 </style>
 </head>
 <body>
 
 <div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 </body>
 </html>

【解释】  
示例代码是一个HTML页面，其中定义了三个DIV元素，分别用来显示红色、绿色、蓝色的颜色块。

使用CSS的基础样式属性设置了这三个DIV元素的宽高为150px，且没有设置位置属性，所以默认的位置都在页面正常流中的位置。

其中`.d2` DIV元素没有使用定位样式，所以它的位置跟页面正常流一样，在其前面的`.d1`元素下方，其后面的`.d3`元素上方，三个元素垂直排列。

`.d1、.d2、.d3` 三个元素的背景颜色分别为红、绿、蓝，因此，页面上会显示三个不同的颜色块，它们垂直排列。  
![在这里插入图片描述][397e6cb8e6d746c4a7fe817025836c7f.png]

接下来让绿色的DIV做一个相对定位：  
于是`.d2{}`内改动代码：

做一个左上定位，让他距离参考位置左侧50px，距离参考位置上方40px （正值和负值都可以设置，比如`right: -50px;`，可以理解为反方向移动50px）

.d2{
        
       background-color: green;
       /* 相对定位 */
       position: relative;
       /* 让他距离参考位置左侧50px，距离参考位置上方40px */
       left: 50px;
       top: 40px;
    }

![在这里插入图片描述][e001f24a74ea46cea444f16e518b8044.png]  
做一个右下定位，让他距离参考位置右侧50px，距离参考位置下方40px

.d2{
        
        background-color: green;
        /* 相对定位 */
        position: relative;
        /* 让他距离参考位置右侧50px，距离参考位置下方40px */
        right: 50px;
        bottom: 40px;
    }

![在这里插入图片描述][ae119d0482e34812b04c791c778f0d03.png]

如果把上方例子中的bottom数据改成150px

.d2{
        
        background-color: green;
        /* 相对定位 */
        position: relative;
        /* 让他距离参考位置右侧50px，距离参考位置下方40px */
        right: 50px;
        bottom: 150px;
    }

输出效果：  
可以看到虽然绿色位置与红色位置上下重合，但是蓝色并没有到绿色的位置去，因为d2元素是相对定位的，即使它向右和向下移动了一定距离，d1和d3元素的相对位置仍然不受影响。  
绿色原来占据的位置没有释放  
![在这里插入图片描述][6f82cba278e64117acd071f29f4dbe25.png]

## 总结 ##

1.  相对定位移动的基准是自身原来的位置
2.  设置`left、top、right、bottom`进行位置移动，距离原基准位置移动，也可以设置负数（反方向）
3.  相对定位的标记，不脱离文档流，原有占据的位置空间不释放

# 绝对定位 position: absolute; #

**position: absolute;**

【示例代码：】

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .p{
 
 width: 200px;
 height: 200px;
 border: 3px gold solid ;
 margin-top: 50px;
 margin-left: 100px;
 position: relative;
 }
 
 .p>div{
 
 width: 50px;
 height: 50px;
 }
 
 .s1{
 
 background-color: aqua;
 }
 
 .s2{
 
 background-color: greenyellow;
 }
 
 </style>
 </head>
 <body>
 
 <div class="p">
 <div class="s1"></div>
 <div class="s2"></div>
 </div>
 </body>
 </html>

输出效果：  
![在这里插入图片描述][abc29d97881a477a99a287f34ed7aba6.png]  
接下来让`.s1`进行绝对定位

.s1{
        
                background-color: aqua;
                /* 绝对定位 */
                position: absolute;
                /* 上下左右四个值设定 */
                left: 10px;
                top: 20px;
            }

通过位置变化发现：是以浏览器为基准移动的  
与相对定位的区别：原来的位置会被另一个占据  
![在这里插入图片描述][371ecb35928c46cfaa9b6ed4040e562b.png]  
如果在父标记中加一个相对定位：

.p{
        
                width: 200px;
                height: 200px;
                border: 3px gold solid ;
                margin-top: 50px;
                margin-left: 100px;
                
                position: relative;
            }

![在这里插入图片描述][0f04f209e7254d7f9fb73dee39c74124.png]

## 总结 ##

1.  绝对定位移动的基准：  
    a：设置了定位属性的父标记  
    b：父标记没设置定位属性，那么移动基准就是浏览器窗口
2.  设置`left、top、right、bottom`进行位置移动，距离原基准位置移动，也可以设置负数（反方向）
3.  绝对定位的标记会脱离文档流，原有占据的空间位置会释放

# 固定定位 position: fixed; #

**position: fixed;**

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div{
 
 width: 100px;
 height: 100px;
 background-color: green;
 /* 固定定位 */
 position: fixed;
 right: 50px;
 bottom: 100px;
 }
 
 </style>
 </head>
 <body>
 <div>
 
 </div>
 </body>
 </html>

输出效果  
![在这里插入图片描述][5802f2db1eee4cfb902784e13309685e.png]

## 总结 ##

1.  固定定位移动的基准是浏览器窗口
2.  设置`left、top、right、bottom`进行位置移动，距离原基准位置移动，也可以设置负数（反方向）
3.  固定定位的标记特点：脱离文档流，原有的占据位置释放掉

# z-index样式 #

用于控制元素在堆叠顺序上的前后顺序  
z-index值越大的元素会被放置在z-index值较小的元素的上面。

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div{
 
 width: 100px;
 height: 100px;
 /* 绝对定位 */
 position: absolute;
 left: 100px;
 top: 50px;
 }
 .d1{
 
 background-color: aqua; 
 }
 .d2{
 
 background-color: gold;
 }
 </style>
 </head>
 <body>
 <div class="d1"></div>
 <div class="d2"></div>
 </body>
 </html>

输出效果：两个div重叠，只剩金色了，淡蓝色被完全盖住  
![在这里插入图片描述][0ed57850610144c190cce599a22031a3.png]  
【解释】  
这段代码创建了一个包含两个div元素的HTML文档。

其中，两个div元素都定义了宽度和高度为100像素，使用了绝对定位（position: absolute），并且左边距为100像素，上边距为50像素。

其中，第一个div元素使用了淡蓝色（aqua）背景色，没有定义z-index值，第二个div元素使用了金色（gold）背景色，同样也没有定义z-index值。

由于两个div元素都没有定义z-index值，因此它们的z-index值均为auto，元素的堆叠顺序是根据元素在html文档中的顺序来确定的。因此，第一个div元素在html文档中先出现，就会在第二个div元素的上方显示。如果需要改变它们的前后顺序，需要改变它们在HTML文档中的位置或者使用z-index属性。

下面给他们加上z-index值，数值默认是0，想让淡蓝色露出来这里设置1

.d1{
        
                background-color: aqua; 
                z-index: 1;
            }

输出结果：  
![在这里插入图片描述][c179bdc977db40d199a2a19df60d2c34.png]

## 总结 ##

`z-index`用于控制绝对定位和固定定位的标记显示，默认是0，值越大显示时越在上方

z-index的属性值可以是正整数、负整数和0，正整数代表元素在堆叠顺序中越往上，负整数越往下，0表示元素的堆叠顺序与文档流一致

举个例子，假设网页中有两个div元素，同时使用了绝对定位，一个div元素的z-index值是1，另一个是2，那么z-index值为2的div元素将会在z-index值为1的div元素上面显示，即后面的div元素会叠在前面的div元素上。这就是z-index属性的作用。

# 数量角标 #

![在这里插入图片描述][6db121cf6b794976bb5071bb7ae09e83.png]

数量角标是指在文本中出现的数字或字母，用于标识或计数  
这里用绝对定位做

【示例代码】：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .wechat{
 
 width: 100px;
 height: 100px;
 background-image: url(./微信.jpg);
 margin-top: 30px;
 position: relative;
 }
 .num{
 
 width: 30px;
 height: 30px;
 border-radius: 15px;
 background-color: red;
 color: #fff;
 text-align: center;
 line-height: 30px;
 position: absolute;
 right: -10px;
 top: -10px;
 }
 
 </style>
 </head>
 <body>
 <div class="wechat">
 <div class="num">888</div>
 </div>
 </body>
 </html>

输出效果：  
![在这里插入图片描述][8d300e4986bc4b70bf12dd106c5513d7.png]

# 透明度设置 opacity #

`opacity`属性可以控制元素的不透明度，取值范围为0到1  
其中0表示完全透明，1表示完全不透明

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img{
 
 width: 400px;
 height: 400px;
 }
 div{
 
 width: 300px;
 height: 300px;
 background-color: gray;
 /* 绝对定位 */
 position: absolute;
 /* 外边距 */
 top: 8px;
 left: 8px;
 /* 透明度 */
 opacity: 0.5;
 }
 </style>
 </head>
 <body>
 <img src="./000.jpg">
 <div></div>
 </body>
 </html>

输出效果：  
![在这里插入图片描述][fa2533b60ad2445bbecfad51f87f81e2.png]

# 返回顶部 #

【示例代码】：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 a{
 
 display: block;
 width: 50px;
 height: 50px;
 border-radius: 25px;
 background-color: gray;
 opacity: 0.7;
 /* 文字居中 */
 text-align: center;
 line-height: 50px;
 /* 下划线去掉 */
 text-decoration: none;
 color: #666;
 position: fixed;
 right: 40px;
 bottom: 100px;
 }
 </style>
 </head>
 <body>
 <a href="#top">顶</a>
 顶部
 跑起来1
 跑起来2
 跑起来3
 跑起来4
 跑起来5
 跑起来6
 跑起来7
 跑起来8
 跑起来9
 跑起来10
 跑起来11
 跑起来12
 跑起来13
 跑起来14
 跑起来15
 跑起来16
 跑起来17
 跑起来18
 跑起来19
 跑起来20
 跑起来21
 跑起来22
 跑起来23
 跑起来24
 跑起来25
 跑起来26
 跑起来27
 跑起来28
 跑起来29
 跑起来30
 跑起来31
 跑起来32
 跑起来33
 跑起来34
 跑起来35
 跑起来36
 跑起来37
 跑起来38
 跑起来39
 跑起来40
 跑起来41
 跑起来42
 跑起来43
 跑起来44
 跑起来45
 跑起来46
 跑起来47
 跑起来48
 跑起来49
 跑起来50
 跑起来51
 跑起来52
 跑起来53
 跑起来54
 跑起来55
 跑起来56
 跑起来57
 跑起来58
 跑起来59
 跑起来60
 跑起来61
 跑起来62
 跑起来63
 跑起来64
 跑起来65
 跑起来66
 跑起来67
 跑起来68
 跑起来69
 跑起来70
 跑起来71
 跑起来72
 跑起来73
 跑起来74
 跑起来75
 跑起来76
 跑起来77
 跑起来78
 跑起来79
 跑起来80
 跑起来81
 跑起来82
 跑起来83
 跑起来84
 跑起来85
 跑起来86
 跑起来87
 跑起来88
 跑起来89
 跑起来90
 跑起来91
 跑起来92
 跑起来93
 跑起来94
 跑起来95
 跑起来96
 跑起来97
 跑起来98
 跑起来99
 跑起来100
 </body>
 </html>

输出效果：  
![在这里插入图片描述][7bbbfbbf44c14989a981bf95d5cde7f3.gif]

--------------------

[397e6cb8e6d746c4a7fe817025836c7f.png]: https://img-blog.csdnimg.cn/397e6cb8e6d746c4a7fe817025836c7f.png
[e001f24a74ea46cea444f16e518b8044.png]: https://img-blog.csdnimg.cn/e001f24a74ea46cea444f16e518b8044.png
[ae119d0482e34812b04c791c778f0d03.png]: https://img-blog.csdnimg.cn/ae119d0482e34812b04c791c778f0d03.png
[6f82cba278e64117acd071f29f4dbe25.png]: https://img-blog.csdnimg.cn/6f82cba278e64117acd071f29f4dbe25.png
[abc29d97881a477a99a287f34ed7aba6.png]: https://img-blog.csdnimg.cn/abc29d97881a477a99a287f34ed7aba6.png
[371ecb35928c46cfaa9b6ed4040e562b.png]: https://img-blog.csdnimg.cn/371ecb35928c46cfaa9b6ed4040e562b.png
[0f04f209e7254d7f9fb73dee39c74124.png]: https://img-blog.csdnimg.cn/0f04f209e7254d7f9fb73dee39c74124.png
[5802f2db1eee4cfb902784e13309685e.png]: https://img-blog.csdnimg.cn/5802f2db1eee4cfb902784e13309685e.png
[0ed57850610144c190cce599a22031a3.png]: https://img-blog.csdnimg.cn/0ed57850610144c190cce599a22031a3.png
[c179bdc977db40d199a2a19df60d2c34.png]: https://img-blog.csdnimg.cn/c179bdc977db40d199a2a19df60d2c34.png
[6db121cf6b794976bb5071bb7ae09e83.png]: https://img-blog.csdnimg.cn/6db121cf6b794976bb5071bb7ae09e83.png
[8d300e4986bc4b70bf12dd106c5513d7.png]: https://img-blog.csdnimg.cn/8d300e4986bc4b70bf12dd106c5513d7.png
[fa2533b60ad2445bbecfad51f87f81e2.png]: https://img-blog.csdnimg.cn/fa2533b60ad2445bbecfad51f87f81e2.png
[7bbbfbbf44c14989a981bf95d5cde7f3.gif]: https://img-blog.csdnimg.cn/7bbbfbbf44c14989a981bf95d5cde7f3.gif