CSS:position属性

一、属性值

1.1 fixed

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

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

网站中的固定 header 和 footer 就是用固定定位来实现的;

header效果图
在这里插入图片描述

footer效果图
在这里插入图片描述

1.2 absolute

绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

会相对于最近的除 static 定位以外的元素进行定位,在使用时要注意设置父元素(或祖先元素)的 position 属性,若父元素(或祖先元素)都没有设置定位属性,absolute 会找到最上层即浏览器窗口,相对于它进行定位了。

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

在这里插入图片描述

1.3 relative

相对定位的元素,相对于其正常位置进行定位。

不添加额外属性(left,right,top,bottom 等),它表现的如同 static 一样,如 .box_1。属性 left,right,top,bottom 会使元素偏离正常位置

因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

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

1.4 static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

二、position.css代码

* {/* 去掉默认内外边距*/padding: 0rem;margin: 0rem;
}.top {width: 100%;height: 10rem;background-color: red;
}.topToolBar1 {width: 100%;height: 3.125rem;position: fixed;/**display: flex*/display: flex;align-items: center;font-size: 1rem;background-color: aquamarine;/* solid解决border无法显示的问题*/border-bottom: 0.125rem solid;border-bottom-color: #f2f2f2;
}.topTab {position: fixed;width: 100%;margin-top: 3.25rem;height: 3.125rem;background-color: gray;
}.middle {width: 100%;height: 16.25rem;position: relative;background-color: blue;
}.middle-child1 {position: absolute;width: 18.75rem;height: 12.5rem;background-color: #b1f5f0;
}.middle-child2 {position: absolute;width: 18.75rem;height: 2.5rem;background-color: #f3d30e;z-index: 30;
}.middle-child1-1 {position: relative;width: 10rem;height: 5rem;background-color: #3c00f3;
}.middle-child1-2 {position: relative;z-index: 10;width: 8rem;height: 3.75rem;background-color: #f1680e;
}.middle-child1-3 {position: relative;width: 6rem;height: 2.5rem;left: 1.25rem;z-index: 20;background-color: #5dfa1d;
}.middle-child1-4 {position: relative;width: 4rem;height: 2.5rem;z-index: 20;background-color: #18b9f3;
}.bottom1 {width: 100%;height: 10rem;bottom: 0;background-color: green;
}.bottom2 {width: 100%;height: 10rem;bottom: 0;margin-bottom: 3.125rem;background-color: green;
}.bottomTip {position: fixed;width: 100%;height: 3.125rem;background-color: gray;/* line-height单行文字居中显示*//* line-height: 3.125rem; */text-align: center;vertical-align: middle;font-size: 0.875rem;bottom: 0;padding-left: 0.625rem;padding-right: 0.625rem;/* 解决padding-right没有生效问题https://www.cnblogs.com/aoximin/p/13173636.htmlbox-sizing: border-box这个属性可以设置:内部宽度+padding+border=容器宽度=实际宽度。比如我设置了宽度为100%,那么个宽度为:父类的宽度(100%)=子类的宽度+padding+border*/box-sizing: border-box;
}

三、position.html

<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试position</title><link rel="stylesheet" href="../css/position.css" /></head><body><!-- https://www.w3cschool.cn/css/css-positioning.html --><div class="top" id="top"><div class="topToolBar1"><div id="back">返回 </div><div id="search"> 搜索 </div><div id="msg">消息</div></div><div class="topTab">tab</div></div><div class="middle" id="middle"><div class="middle-child1"><div class="middle-child1-1">
child1-1</div><div class="middle-child1-2">
child1-2</div><div class="middle-child1-3">
child1-3</div><div class="middle-child1-4">
child1-4</div></div><div class="middle-child2">child2</div></div><div class="bottom1" id="bottom1"><h3>底部1</h3></div><div class="bottom2" id="bottom2"><h3>底部2</h3><p>底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容底部内容</p><p>hello hellohellohellohellohellohellohellohellowordwordwordwordwordwordwordwordwordwordword</p><p>endendendendendendendendendendendendendendendL</p></div><div class="bottomTip">温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示bfdhhhtjtujuj6t</div></body>
</html>

四、testH5源码

点击查看testh5源码

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器自动化测试工具selenium——爬虫操作记录

selenium——是一款web自动化测试框架&#xff0c;其能模拟正常的用户操作&#xff0c;比如点击。但selenium并不是浏览器&#xff0c;没有执行js和解析html/css的能力&#xff0c;因此selenium需要和浏览器配合使用。 因为selenium可以模仿用户行为&#xff0c;因此selenium也…

Linux系统安装Cobol语言及IBM大型机模拟软件Hercules

COBOL&#xff08;Common Business-Oriented Language&#xff09;起源于50年代中期&#xff0c;是一种面向过程的高级程序设计语言&#xff0c;主要用于商业和数据处理领域。经过不断发展和标准化&#xff0c;已成为国际上应用最广泛的商业编程语言之一&#xff0c;在某red书上…

Windows Server搭建局域网NTP时间服务器与客户端通实现

1.服务器环境&#xff1a; win11更改注册表 winR输入regedit win11更改注册表 winR输入regedit 2.HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config&#xff0c;找到Config目录&#xff0c;双击Config目录下的AnnounceFlags&#xff0c;设为5。 3.HKEY_L…

Nginx 配置与优化:常见问题全面解析

文章目录 Nginx 配置与优化:常见问题全面解析一、Nginx 安装与配置问题1.1 Nginx 安装失败问题描述解决方法1.2 Nginx 配置文件语法错误问题描述解决方法二、Nginx 服务启动与停止问题2.1 Nginx 无法启动问题描述解决方法2.2 Nginx 服务无法停止问题描述解决方法三、Nginx 性能…

Http 和 Https 的区别(图文详解)

在现代网络通信中&#xff0c;保护数据的安全性和用户的隐私是至关重要的。HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是两种常见的网络通信协议&#xff0c;但它们在数据保护方面的能力存在…

snkemake入门

一、背景介绍 snakemake是一种用于自动化流程的开源工具&#xff0c;是一款基于python3的软件。在生物信息学、高通量测序数据分析、大规模数据处理等领域非常流行。 snakemake的官网&#xff1a;Snakemake | Snakemake 8.16.0 documentationhttps://snakemake.readthedocs.i…

Android SurfaceFlinger——GraphicBuffer内存申请(三十)

在上一篇文章中介绍 GraphicBuffer 初始化的 initWithSize() 函数中,有两个核心方法,GraphicBufferAllocator.allocate 和 GraphicBufferMapper. getTransportSize,这里我们就来看一下 allocate() 函数是如何实现内存申请的。 一、函数介绍 在Android的图形子系统中,Graph…

自监督学习概述(Self-Supervised Learning,SSL)

自监督学习&#xff08;Self-Supervised Learning&#xff0c;SSL&#xff09;是一种机器学习方法&#xff0c;旨在利用未标记数据进行训练。这种方法通过从数据本身生成伪标签&#xff0c;来创建监督信号&#xff0c;使得模型能够学习有效的数据表示。自监督学习在深度学习领域…

C++ | Leetcode C++题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };

第一周第三天任务

入职了新公司&#xff0c;电脑限制了公网访问&#xff0c;为了补上打卡进度&#xff0c;后面的打卡内容纯手敲文本&#xff0c;没有图片&#xff0c;不便之处请谅解&#xff0c;如果错误&#xff0c;请帮忙指正&#xff0c;谢谢。 11 使用docker-compose 使用一个工具&#x…

多通道音频解决方案

多通道音频解决方案在现代音频应用中具有广泛的应用&#xff0c;特别是在需要处理多个音频信号、实现复杂声音场景和提升用户体验的场合。比如音乐录制和影视和游戏音效设计等等。 音乐录制与制作音乐录制 需求: 音乐录制工作室需要能够同时录制和处理多个音轨&#xff0c;以便…

百度地图埋点动态插入到页面不生效, 定位发现是 document.write 缘故,不能异步引入该埋点 js

背景: 为提高页面加载速度, 根据地址的不同加载不同的 script (Vue 项目, 一份代码放到多个地址, 根据地址不同显示不同登录页), 结果引用的百度地图 api 失效 定位: 发现埋点 js 引入成功, 该 js 生成的内容是 document.write 再引入 js , css 文件, 这些文件没有加载出来 …

MathType 7.8中文直装版2024年最新图文安装破解教程

MathType公式编辑器 v7.8中文破解版是一款适用于Windows和Macintosh的便捷交互式公式编辑器&#xff0c;可帮助您进行文字处理、网页、桌面设计、演示文稿制作、学习TeX、LaTeX和MathML文档创建。 MathType 7.8这个工具允许用户创建、修改公式和插入多个文档。有了这个软件&…

​CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效​

CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效​ 大家好,本篇文章给大家带来一个可爱的按钮,像个小宠物等待你抚摸和奖励,不知道它会不会引起你的关注呢?页面上这样的一个按钮,会不会让你忍不住把鼠标移动过去点一下呢? 本例图片 案例分析 这个…

机械学习—零基础学习日志(高数12——反三角函数)

零基础为了学人工智能&#xff0c;真的开始复习高数 反三角函数很困难&#xff0c;但是当建立了逻辑链条&#xff0c;还是能快速理解的。这个办法就是笛卡尔坐标系。 三角函数与反三角函数的个人理解 sinx与cosx&#xff0c;tanx&#xff0c;secx&#xff0c;其实都可以放在…

白嫖游戏指南,Epic喜加一:《暗影火炬城》

前言 Epic喜加一&#xff1a;《暗影火炬城》《暗影火炬城》简介&#xff1a; 前言 接下来有时间会分享一些游戏相关可以白嫖的资源&#xff0c;包括游戏本体、游戏素材资源等等。 有需要的小伙伴可以关注这个专栏&#xff0c;不定期更新哦&#xff01; 专栏&#xff1a;白嫖…

数据库系统概述

文章目录 数据库基本概念内容重点数据库定义计算机三大主要应用领域 数据管理基础数据与信息数据处理与数据管理 数据库技术的产生、发展数据库系统的组成优势组成部分 数据模型概念类型 数据库三级模式和二级映射目的组成部分 数据库系统设计步骤小结 数据库基本概念 内容 信…

羊大师:夏夜贪凉,但为啥肚子还要‘保暖计划’?

在这个夏夜&#xff0c;当空调与风扇齐飞&#xff0c;冰镇西瓜与凉面共舞之时&#xff0c;你是否也曾有过这样的疑惑&#xff1a;明明热得汗流浃背&#xff0c;为啥老一辈总念叨着“睡觉再热也要给肚子盖被子”&#xff1f;这背后&#xff0c;藏着的可不仅仅是老一辈的固执&…

链路聚合加单臂路由

一、实验目的及拓扑 实验目的&#xff1a;在路由器及交换机之间建立链接聚合&#xff0c;交换机接入两台主机并通过路由器子接口自动分配IP地址&#xff0c;通过单臂路由实现两台主机互联 二、基本配置 1、交换机配置 [S1]vlan batch 10 20 [S1-Eth-Trunk1]dis th # interf…

小型内衣裤洗衣机哪个牌子好?五款万分翘楚机型任你挑选!

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…