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 定 ...
随机推荐
- HttpServletResponse 入门
继承体系 功能: 设置响应消息 1. 设置响应行 格式:HTTP/1.1 200 ok 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name, ...
- 【UE4 设计模式】简单工厂模式 Simple Factory Pattern
概述 描述 又称为静态工厂方法 一般使用静态方法,根据参数的不同创建不同类的实例 套路 创建抽象产品类 : 创建具体产品类,继承抽象产品类: 创建工厂类,通过静态方法根据传入不同参数从而创建不同具体产 ...
- Java：死锁编码及定位分析
Java:死锁编码及定位分析 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 概念 死锁是指两个或多个以上的进程在执行过程中,因争夺资源而造成一种互相等待的现象, ...
- Idea Maven auto Import
- [对对子队]会议记录4.19(Scrum Meeting10)
今天已完成的工作 何瑞 工作内容:搭建第2关,基本完成第3关 相关issue:搭建关卡2.3 相关签入:4.19签入1 4.19签入2 刘子航 工作内容:完成关卡选择界面的设计图 ...
- Noip模拟7 2021.6.11
前言 考试时候der展了,T1kmp没特判(看来以后还是能hash就hash),T2搜索细节没注意,ans没清零,130飞到14.... T1 匹配(hash/kmp) 这太水了,其实用个hash随便 ...
- stm32电机控制之控制两路直流电机！看完你会了吗
手头上有一个差分驱动的小车,使用两个直流电机驱动,要实现小车的在给定速度下运动,完成直线行驶,转向,加速,刹车等复杂运动. 使用的电机是12v供电的直流电机,带编码器反馈,这样就可以采用闭环速度控制, ...
- 基于屏幕空间的实时全局光照（Real-time Global Illumination Based On Screen Space）
目录 Reflective Shadow Maps(RSM) RSM 的重要性采样 RSM 的应用与缺陷 Screen Space Ambient Occulsion(SSAO) SSAO Blur ...
- python环境搭建、pycharm安装
一． 实验目标 (1) Python环境搭建 (2) 会pycharm安装和使用 (3) 了解python程序设计流程 二． 实验内容 1.勾选Add Python 3.7 ...
- Matlab 中 arburg 函数的理解与实际使用方法
1. 理解 1.1 Matlab 帮助: a = arburg(x,p)返回与输入数组x的p阶模型相对应的归一化自回归(AR)参数. 如果x是一个向量,则输出数组a是一个行向量. 如果x是矩阵,则参数 ...