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四种定位-固定定位相关推荐

Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
定位的简介和四种定位
目录一.定位的简介二.四种定位 Ⅰ 相对定位 Ⅱ 绝对定位 Ⅲ 固定定位 Ⅳ 粘滞定位一.定位的简介定位(position) 定位时一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位 ...
CSS基础: 五种定位以及定位叠放次序
前面看到浮动其实可以让某个盒子模块在某个位置,但是为什么还要右定位? 其实很简单,因为浮动有些定位是解决不了的,比如看下图: 在滑动的时候,你发现了没有,那就是标记的地方,拉动网页都在顶部和侧面,如果 ...
相对定位，绝对定位和固定定位的区别
一.定位: 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位可选值: stat ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
CSS之定位（固定定位）
固定定位: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...
CSS-position: fixed固定定位
固定定位 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
【前端】CSS中的相对定位，绝对定位和固定定位
相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: position默认值为stat ...

HTML四种定位-固定定位

HTML四种定位-固定定位相关推荐

最新文章

热门文章