CSS+HTML实现元素定位

news2024/11/28 2:42:58

文章目录

  • 相对定位 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.d$*3 公式生成-->
    <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 三个元素的背景颜色分别为红、绿、蓝，因此，页面上会显示三个不同的颜色块，它们垂直排列。
在这里插入图片描述

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

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

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

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

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

在这里插入图片描述

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

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

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

总结

  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.p>div.s$*2 公式生成-->
    <div class="p">
        <div class="s1"></div>
        <div class="s2"></div>
    </div>
</body>
</html>

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

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

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

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

在这里插入图片描述

总结

  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>

输出效果
在这里插入图片描述

总结

  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重叠，只剩金色了，淡蓝色被完全盖住
在这里插入图片描述
【解释】
这段代码创建了一个包含两个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;
        }

输出结果：
在这里插入图片描述

总结

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属性的作用。

数量角标

在这里插入图片描述

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

【示例代码】：

<!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>

输出效果：
在这里插入图片描述

透明度设置 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>

输出效果：
在这里插入图片描述

返回顶部

【示例代码】：

<!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>
    <p id="top">顶部</p>
    <p>跑起来1</p>
    <p>跑起来2</p>
    <p>跑起来3</p>
    <p>跑起来4</p>
    <p>跑起来5</p>
    <p>跑起来6</p>
    <p>跑起来7</p>
    <p>跑起来8</p>
    <p>跑起来9</p>
    <p>跑起来10</p>
    <p>跑起来11</p>
    <p>跑起来12</p>
    <p>跑起来13</p>
    <p>跑起来14</p>
    <p>跑起来15</p>
    <p>跑起来16</p>
    <p>跑起来17</p>
    <p>跑起来18</p>
    <p>跑起来19</p>
    <p>跑起来20</p>
    <p>跑起来21</p>
    <p>跑起来22</p>
    <p>跑起来23</p>
    <p>跑起来24</p>
    <p>跑起来25</p>
    <p>跑起来26</p>
    <p>跑起来27</p>
    <p>跑起来28</p>
    <p>跑起来29</p>
    <p>跑起来30</p>
    <p>跑起来31</p>
    <p>跑起来32</p>
    <p>跑起来33</p>
    <p>跑起来34</p>
    <p>跑起来35</p>
    <p>跑起来36</p>
    <p>跑起来37</p>
    <p>跑起来38</p>
    <p>跑起来39</p>
    <p>跑起来40</p>
    <p>跑起来41</p>
    <p>跑起来42</p>
    <p>跑起来43</p>
    <p>跑起来44</p>
    <p>跑起来45</p>
    <p>跑起来46</p>
    <p>跑起来47</p>
    <p>跑起来48</p>
    <p>跑起来49</p>
    <p>跑起来50</p>
    <p>跑起来51</p>
    <p>跑起来52</p>
    <p>跑起来53</p>
    <p>跑起来54</p>
    <p>跑起来55</p>
    <p>跑起来56</p>
    <p>跑起来57</p>
    <p>跑起来58</p>
    <p>跑起来59</p>
    <p>跑起来60</p>
    <p>跑起来61</p>
    <p>跑起来62</p>
    <p>跑起来63</p>
    <p>跑起来64</p>
    <p>跑起来65</p>
    <p>跑起来66</p>
    <p>跑起来67</p>
    <p>跑起来68</p>
    <p>跑起来69</p>
    <p>跑起来70</p>
    <p>跑起来71</p>
    <p>跑起来72</p>
    <p>跑起来73</p>
    <p>跑起来74</p>
    <p>跑起来75</p>
    <p>跑起来76</p>
    <p>跑起来77</p>
    <p>跑起来78</p>
    <p>跑起来79</p>
    <p>跑起来80</p>
    <p>跑起来81</p>
    <p>跑起来82</p>
    <p>跑起来83</p>
    <p>跑起来84</p>
    <p>跑起来85</p>
    <p>跑起来86</p>
    <p>跑起来87</p>
    <p>跑起来88</p>
    <p>跑起来89</p>
    <p>跑起来90</p>
    <p>跑起来91</p>
    <p>跑起来92</p>
    <p>跑起来93</p>
    <p>跑起来94</p>
    <p>跑起来95</p>
    <p>跑起来96</p>
    <p>跑起来97</p>
    <p>跑起来98</p>
    <p>跑起来99</p>
    <p>跑起来100</p>
</body>
</html>

输出效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/723964.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【广州华锐互动】智慧物流3D可视化数据分析展示平台

【广州华锐互动】智慧物流3D可视化数据分析展示平台

智慧物流3D可视化数据分析展示平台是一种基于数字孪生技术的新型物流管理工具&#xff0c;它可以帮助物流企业实现对物流过程的全面监控和管理。相比传统的物流管理方式&#xff0c;智慧物流3D可视化数据分析展示平台具有以下意义&#xff1a; 1.提高物流效率&#xff1a;智慧…
阅读更多...
vue自定义菜单栏并循环便利使用

vue自定义菜单栏并循环便利使用

浅尝vue 前言&#xff1a; 在网上找了蛮多关于自定义表单对象进行循环处理&#xff0c;写的我都看的一脸懵&#xff0c;最后还是直接修改组件完善了&#xff0c;直接用v-for 进行循环绑定实现了。本例实现了自定义菜单栏和vue-router 路由指向菜单并进行路由跳转&#xff0c;主…
阅读更多...
Idea打包Jar文件

Idea打包Jar文件

https://blog.csdn.net/qq_35356840/article/details/98725948 注意这个坑&#xff1a;
阅读更多...
html前端输入框模糊查询

html前端输入框模糊查询

1、一个页面内多个模糊查询情况&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalable0, minimum-scale1.0, maximum-…
阅读更多...
PHP中的变量

PHP中的变量

在PHP中变量是用于储存信息的容器&#xff0c;我们命令服务器去干活的时候&#xff0c;往往需要产生一些数据&#xff0c;需要临时性存放起来&#xff0c;方便取用赋值方法与数学中的代数相类似 1、在PHP中变量是用于储存信息的容器&#xff0c;类似于数学中的集合 2、赋值方法…
阅读更多...
ctf web解题系列————T1

ctf web解题系列————T1

文章目录 弱类型题目思路 基于PHP语言 弱类型 表示0乘10的123456次方。 题目 思路 此处为弱相等 使用hackbar进行调试 猜测&#xffe5;key为一个字符串&#xff0c;则化为数字–>0 直接在hackbar中输入令message的key值为0即可。 若不为纯字符&#xff0c;则采用枚举爆…
阅读更多...
Rust in Action笔记 第十一、十二章 简易操作系统内核

Rust in Action笔记 第十一、十二章 简易操作系统内核

本章讲了如何用Rust写一个简易的操作系统&#xff08;FledgeOS&#xff09;&#xff0c;除了Rust的知识外&#xff0c;可以了解操作系统主要的组成部分&#xff0c;加深对操作系统的理解 首选需要掌握和了解一些工具或者技术&#xff0c;QEMU是一种虚拟化技术&#xff0c;用于…
阅读更多...
CANoe的面板控件input/output关联信号的问题分析

CANoe的面板控件input/output关联信号的问题分析

1、引子 当我们想在CANoe中制作一个面板，实现：在一个文本框中输入某个信号的值，点击发送按钮，就能把信号所在的CAN消息发送出去，此时信号的值就是文本框中输入的值。 要实现此功能很简单，在CANoe上新建一个面板，在工具箱中把Input/Output Box和Button两个控件拖到面板…
阅读更多...
测试函数-ZDT函数.txt版本免费下载

测试函数-ZDT函数.txt版本免费下载

多目标优化问题中&#xff0c;改进NSGA-II算法需要测试函数ZDT函数来查看改进的效果如何&#xff0c;大多博客下载需要积分&#xff0c;在这附上免费网址&#xff0c;大家自行下载。包含ZD1-ZDT6 如下 Emoobook - Appendix D
阅读更多...
Azure 中 Linux的时间同步问题

Azure 中 Linux的时间同步问题

问题概述 Azure环境中&#xff0c;将群集主机放置在不同的可用区。由于网络限制比较严格没有开启外部或内部NTP时间同步&#xff0c;而是考虑用Azure主机的时间同步&#xff0c;但群集会由于时间差异而出现异常告警信息。 问题分析 问题主要是以下原因形成&#xff1a; 自…
阅读更多...
NSS [HNCTF 2022 Week1]2048

NSS [HNCTF 2022 Week1]2048

NSS [HNCTF 2022 Week1]2048 前端小游戏&#xff0c;小菜。 flag&#xff1a;
阅读更多...
vue+Nodejs+Koa搭建前后端系统（七）-- 用户注册、注销

vue+Nodejs+Koa搭建前后端系统（七）-- 用户注册、注销

前言 前端采用vue3前端组件库采用ElementPlus本篇文章需要结合上一篇《vueNodejsKoa搭建前后端系统&#xff08;六&#xff09;-- 用户登录》一起看 客户端用户注册页面 添加注册页面 添加 /src/pages/register/register.vue 文件 安装md5 md5是加密插件&#xff0c;用于…
阅读更多...
算力井喷、全球布局，亚马逊云科技生成式AI不断创新解决企业需求

算力井喷、全球布局，亚马逊云科技生成式AI不断创新解决企业需求

时至今日&#xff0c;生成式AI在创意输出&#xff08;如写作、编程、设计&#xff09;、功能增强&#xff08;如写摘要、搜索&#xff09;、交互式体验&#xff08;Q&A、聊天&#xff09;和决策支持&#xff08;各类助理&#xff09;这四个领域已展现出惊人潜力。 在亚马逊…
阅读更多...
软件测试外包

软件测试外包

目录 前言&#xff1a; 评估软件测试服务提供商 为什么将测试外包出去 测试服务外包应当考虑因素 参与模式 地理位置 服务协议 灵活性 质量改进 如何选择测试外包服务商 需要什么外包 调查 互动 结论 前言&#xff1a; 在当今的软件开发行业中&#xff0c;越来越…
阅读更多...
k8s Volume之Persistent Volume持久卷

k8s Volume之Persistent Volume持久卷

一、Persistent Volume yaml详情&#xff1a; kind: PersistentVolume apiVersion: v1 metadata:# PV卷名称name: nfs-mvn-repo spec:# 容量capacity:# 存储大小storage: 20Ginfs:server: 192.168.80.170path: /srv/nfs/disk/mvn-repo# 该卷支持的访问模式accessModes:- ReadW…
阅读更多...
SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【2】

SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【2】

上一篇 SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试_hkNaruto的博客-CSDN博客 虚拟机时间&#xff0c;一天后获得结果 由于ssh版本太低&#xff0c;采用nc把文件拷贝出来 结果 SPEC CFP2006 Result Copyright 2006-2023 Standard Performance Evaluation Corporatio…
阅读更多...
MES系统

MES系统

MES系统&#xff0c;全称制造执行系统(Manufacturing Execution System)&#xff0c;是一种用于实时监控、追踪和控制生产过程的计算机化系统。 SAP Fiori概览 相信工作中接触过SAP的人&#xff0c;肯定对SAP Fiori不陌生。那什么是SAP Fiori呢&#xff1f; SAP Fiori是一种用于…
阅读更多...
基于STM32单片机的智能视力保护台灯设计

基于STM32单片机的智能视力保护台灯设计

硬件方案 智能台灯以专门感应人体红外信号的红外传感器为基础&#xff0c;这意味着仅当有人的时候&#xff0c;红外传感器才输出一个信号&#xff0c;经放大处理后达到单片机的输入门限电压&#xff0c;单片机开始运行&#xff0c;台灯自动点亮。当人离开的时候&#xff0c;单…
阅读更多...
CSRF漏洞

CSRF漏洞

前言 作者简介&#xff1a;不知名白帽&#xff0c;网络安全学习者。 博客主页&#xff1a;不知名白帽的博客_CSDN博客-网络安全,CTF,内网渗透领域博主 网络安全交流社区&#xff1a;https://bbs.csdn.net/forums/angluoanquan 目录 CSRF漏洞原理 CSRF常见分类 GET型 POST型…
阅读更多...
GIT版本控制常规性操作演示汇总

GIT版本控制常规性操作演示汇总

文章目录 GIT基本操作GIT配置个人信息配置&#xff1a;GIT查看个人信息配置&#xff1a;GIT的三大区域GIT回滚&#xff1a;git resetGIT恢复日志&#xff1a;git reflogGIT三大区域转换GIT新建分支GIT合并分支GIT删除分支码云上创建项目GIT变基&#xff1a;git rebase合并提交记…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023