11-定位
定位
定位分三种:
1、相对定位;
2、绝对定位;
3、固定定位;
相对定位
相对定位:相对于自己原来的位置进行定位。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box1{ 12 width: 200px; 13 height: 200px; 14 background-color: red; 15 position: relative; 16 top: 30px; 17 left: 50px; 18 } 19 .box2{ 20 width: 200px; 21 height: 200px; 22 background-color: green; 23 } 24 25 </style> 26 27 </head> 28 <body> 29 30 31 <div class="box1"></div> 32 <div class="box2"></div> 33 34 35 </body> 36 </html>
设置了相对定位,它不会脱标,层级会提高。
设置了相对定位,就能使用四个方向的left、right、top、bottom。
特性:
1、不脱标;
2、形影分离;
3、老家留坑;
绝对定位
特性:
1.脱标 2.做遮盖效果,提升了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。
参考点(重点):
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
作用:页面布局常见的“父相子绝”,一定要会!!!!
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box1{ 12 width: 200px; 13 height: 200px; 14 background-color: red; 15 } 16 .box2{ 17 width: 200px; 18 height: 200px; 19 background-color: green; 20 position: absolute; 21 top:40px; 22 left:0; 23 } 24 .box3{ 25 width: 250px; 26 height: 200px; 27 background-color: blue; 28 29 } 30 </style> 31 </head> 32 <body style="height: 2000px;"> 33 34 <!-- --> 35 <div class="box1"></div> 36 <div class="box2"></div> 37 <div class="box3"></div> 38 39 40 </body> 41 </html>
父相子绝实现轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .father{ 12 width: 992px; 13 height: 460px; 14 background-color: red; 15 float: right; 16 position: relative; 17 } 18 .prev{ 19 width: 50px; 20 height: 50px; 21 line-height: 50px; 22 text-align: center; 23 position: absolute; 24 background-color: #000; 25 color: #fff; 26 top: 50%; 27 left: 0px; 28 29 30 } 31 .next{ 32 width: 50px; 33 height: 50px; 34 line-height: 50px; 35 text-align: center; 36 position: absolute; 37 background-color: #000; 38 color: #fff; 39 top: 50%; 40 right: 0; 41 } 42 43 </style> 44 </head> 45 <body> 46 47 <div class="father"> 48 <span class="next">></span> 49 <span class="prev"><</span> 50 </div> 51 52 </body> 53 </html>
绝对定位的盒子居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- <link rel="stylesheet" href="header.css"> 7 <link rel="stylesheet" href="content.css"> --> 8 <!-- <link rel="stylesheet" href="main.css"> --> 9 <style> 10 *{ 11 padding: 0; 12 margin: 0; 13 } 14 15 .father{ 16 width: 100%; 17 height: 200px; 18 background-color: red; 19 position: relative; 20 } 21 .box{ 22 width: 400px; 23 height: 100px; 24 background-color: green; 25 position: absolute; 26 27 /**/ 28 left: 50%; 29 margin-left: -200px; 30 } 31 32 33 </style> 34 </head> 35 <body> 36 <div class="father"> 37 <div class="box"></div> 38 </div> 39 40 </body> 41 </html>
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖,提升层级 3.固定不变
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点
作用: 1.返回顶部栏 2.固定导航栏 3.小广告
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 body{ 12 padding-top: 80px; 13 } 14 .header{ 15 width: 100%; 16 height: 80px; 17 background-color: red; 18 /*脱离了标准文档流*/ 19 20 /*参考点:是以浏览器的左上角*/ 21 position: fixed; 22 top:0; 23 left: 0; 24 z-index: 10000; 25 26 } 27 .active{ 28 position: relative; 29 30 } 31 </style> 32 </head> 33 <body> 34 35 <div class="header"></div> 36 37 <p>alex1</p> 38 <p>alex2</p> 39 <p>alex3</p> 40 <p>alex4</p> 41 <p>alex5</p> 42 <p>alex6</p> 43 <p>alex7</p> 44 <p>alex8</p> 45 <p>alex</p> 46 <p>alex</p> 47 <p>alex</p> 48 <p>alex</p> 49 <p>alex</p> 50 <p>alex</p> 51 <p>alex</p> 52 <p>alex</p> 53 <p>alex</p> 54 <p>alex</p> 55 <p>alex</p> 56 <p>alex</p> 57 <p>alex</p> 58 <p>alex</p> 59 <p>alex</p> 60 <p>alex</p> 61 <p>alex</p> 62 <p>alex</p> 63 <p>alex</p> 64 <p>alex</p> 65 <p>alex</p> 66 <p>alex</p> 67 <p>alex</p> 68 <p class="active">alex6666</p> 69 <p>alex</p> 70 <p>alex</p> 71 <p>alex</p> 72 <p>alex</p> 73 <p>alex</p> 74 <p>alex</p> 75 <p>alex</p> 76 <p>alex</p> 77 <p>alex</p> 78 <p>alex</p> 79 <p>alex</p> 80 <p>alex</p> 81 <p>alex</p> 82 <p>alex</p> 83 <p>alex</p> 84 <p>alex</p> 85 <p>alex</p> 86 <p>alex</p> 87 <p>alex</p> 88 <p>alex</p> 89 <p>alex</p> 90 <p>alex</p> 91 <p>alex</p> 92 <p>alex</p> 93 <p>alex</p> 94 95 96 </body> 97 </html>
作者:流浪者
日期:2019-08-31
原文地址:https://www.cnblogs.com/897463196-a/p/11439767.html
- 深入nDPI
- 44个Java代码性能优化总结
- 干货:Java正确获取客户端真实IP方法整理
- sublime学习笔记
- Java程序员必须掌握的常用Linux命令。
- SAMP论文学习
- IEEE Trans 2009 Stagewise Weak Gradient Pursuits论文学习
- async和enterproxy控制并发数量
- 从零开始写项目终极【维护网站、修复Bug】
- Redis 数据结构与内存管理策略(下)
- Redis 数据结构与内存管理策略(上)
- Servlet第三篇【request和response简介、response的常见应用】
- Java 10的10个新特性,将彻底改变你写代码的方式!
- JDK9新特性实战:简化流关闭新姿势。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法