HTML四种定位-固定定位
固定定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 body{
10 height: 2000px;
11 }
12 .box1{
13 width: 200px;
14 height: 200px;
15 background-color: #bfa;
16
17 }
18 .box2{
19 width: 200px;
20 height: 200px;
21 background-color: tomato;
22 /*
23 固定定位：
24 -将元素的position属性设置为fixed则开启了元素的固定定位
25 -固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
26 -唯一不同的是固定定位永远参照于浏览器的视口进行定位
27 固定定位的元素不会随网页的滚动条滚动
28 */
29 position: fixed;
30 left: 200px;
31 top: 200px;
32 }
33 .box3{
34 width: 200px;
35 height: 200px;
36 background-color: greenyellow;
37
38 }
39 .box4{
40 width: 400px;
41 height: 400px;
42 background-color: rgb(47, 61, 255);
43
44 }
45 .box5{
46 width: 300px;
47 height: 300px;
48 background-color: rgb(201, 14, 145);
49
50
51 }
52 </style>
53 </head>
54 <body>
55 <div class="box1">1</div>
56 <div class="box4">
57 4
58 <div class="box5">
59 5
60 <div class="box2">2</div>
61 </div>
62 </div>
63
64 <div class="box3">3</div>
65 </body>
66 </html>
HTML四种定位-固定定位的更多相关文章
- HTML四种常见的定位-相对定位
相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- CSS层定位——固定定位，相对定位，绝对定位
主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
文章目录 1.相对定位 1.1 代码 1.2 测试结果 2.绝对定位 2.1 代码 2.2 测试 3.固定定位 3.1 代码 3.2 测试结果 1.相对定位 1.1 代码 <!DOCTYPE h ...
- 固定定位 z-index iconfont的使用 043
固定定位 现象 脱标 提升层级 将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- 基于redis实现的四种常见的限流策略
引言 在web开发中功能是基石,除了功能以外运维和防护就是重头菜了.因为在网站运行期间可能会因为突然的访问量导致业务异常.也有可能遭受别人恶意攻击 所以我们的接口需要对流量进行限制.俗称的QPS也是对 ...
- android 定位的四种方式
[原文] 开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定 ...
随机推荐
- 一个神秘的oj2093 花园的守护之神（最小割）
给定一张无向图,你每次可以将一条路的权值增加1,询问最少增加多少次才会使得\(s->t\)的最短路改变 QwQ一看到这个题,我就用种最小割的感觉 我们可以把最短路上的点取出来,然后做最小割呀!! ...
- pta天梯训练赛补题
7-1谁先倒 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就输了,输家罚一杯酒.两人 ...
- Python - faker
安装 faker pip install Faker pip install Dumper 设置生成器 from faker import Faker fake = Faker() 它可以通过访问以想 ...
- ReentrantLock可重入锁、公平锁非公平锁区别与实现原理
ReentrantLock是lock接口的一个实现类,里面实现了可重入锁和公平锁非公平锁 ReentrantLock公平锁和不公平锁实现原理 公平锁会获取锁时会判断阻塞队列里是否有线程再等待,若有获取 ...
- [对对子队]会议记录4.17(Scrum Meeting8)
今天已完成的工作 何瑞 工作内容:修复了一些bug,优化了UI 相关issue:搭建关卡1 相关签入:4.17签入1 吴昭邦 工作内容:做了一些流水线系统的错误处理,添加了合成失败了之 ...
- java中生成和验证jwt
在这篇文章中主要记录一下在Java中如何使用 java 代码生成jwt token,主要是使用jjwt来生成和验证jwt,关于什么是JWT,以及JWT可以干什么不做详解. jwt的格式: base64 ...
- TCP/IP参考模型（应用层、传输层、网际层、网络接口层）、五层参考模型（应用层、传输层、网络层、数据链路层、物理层）、OSI与TCP/IP参考模型比较
文章转自:https://blog.csdn.net/weixin_43914604/article/details/104597450 学习课程:<2019王道考研计算机网络> 学习目的 ...
- 洛谷 P2252 [SHOI2002]取石子游戏|【模板】威佐夫博弈
链接: P2252 [SHOI2002]取石子游戏|[模板]威佐夫博弈 前言: 第一眼大水题,第二眼努力思考,第 N 眼我是大水逼. 题意: 不看题目标题都应该能看出来是取石子类的博弈论. 有两堆石子 ...
- objdump--反汇编查看
转载:objdump命令_Linux objdump 命令用法详解:显示二进制文件信息 (linuxde.net) objdump命令 编程开发 objdump命令是用查看目标文件或者可执行的目标文件 ...
- cm2 逆向分析
目录 cm2 逆向分析 前言 查壳 逆向分析 encrypt函数 POC代码 cm2 逆向分析 前言 这是逆向实战之CTF比赛篇的第3篇,在这里我就不再讲的特别小白了,有些简单操作可能会略过. 查壳 ...