一, 定位的介绍
定位有三种: 相对定位(position:relative), 绝对定位(position:absolute), 固定定位(position:fixed)
二, 三种定位的用法, 特点和实例
2.1, 相对定位 特性: 不脱标, 形影分离, 老家留坑
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/CSS">
- *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{
- background-color: red; } .box2{ background-color: green; position: relative;
- /*top: 50px;*/ left: 300px; } .box3{ background-color: blue; }
- </style>
- </head>
- <body>
- <!-- 相对定位三大特性: 1. 不脱标 2. 形影分离 3. 老家留坑 所以说 相对定位 在页面中没有什么太大的作用. 影响我们页面的布局.
- 但是我们不要使用相对定位来做压盖效果 -->
- <div class="box1">
- </div>
- <div class="box2">
- </div>
- <div class="box3">
- </div>
- </body>
- </HTML>
相对定位的特性
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 超链接美化
- </title>
- <style type="text/css">
- /* 清除默认样式 */ *{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{
- width: 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ;
- background-color: purple; /* 设置圆角 */ border-radius: 10px; } .nav ul li{
- float: left; width: 160px; height: 40px; line-height: 40px; text-align:
- center; } .nav ul li.xiaoming{ position: relative; top: 40px; left: 30px;
- } .nav ul li a{ display: block; width: 160px; height: 40px; color: white;
- font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a
- 标签除外, 不继承父元素的 color*/ .nav ul li a:hover{ background-color: red; font-size:
- 22px; }
- </style>
- </head>
- <body>
- <div class="nav">
- <ul>
- <li>
- <a href="">
- 网站导航 1
- </a>
- </li>
- <li class="xiaoming">
- <a href="">
- 网站导航 2
- </a>
- </li>
- <li>
- <a href="">
- 网站导航 3
- </a>
- </li>
- <li>
- <a href="">
- 网站导航 4
- </a>
- </li>
- <li>
- <a href="">
- 网站导航 5
- </a>
- </li>
- <li>
- <a href="">
- 网站导航 6
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
- <!-- 因为相对定位有坑, 占着茅房不拉屎, 所以我们一般不要使用相对定位来做压盖效果. 它在页面中, 效果作用极小, 就两个作用:
- 1. 微调元素位置
- 2. 做绝对定位的参考(父相子绝) 讲绝对定位会讲
- -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } div{ margin: 100px; } .user{ font-size: 25px;
- } .btn{ position: relative; top: 3px; left: -5px; }
- </style>
- </head>
- <body>
- <!-- 微调我们元素位置 -->
- <div>
- <input type="text" name="username" class="user">
- <input type="button" name="" value=" 点我 " class="btn">
- </div>
- </body>
- </HTML>
相对定位的用途
2.2, 绝对定位 特性: 脱标, 做遮盖效果, 提升了层级, 设置绝对定位之后, 不区分行内元素和块级元素, 都能设置宽高
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{
- background-color: red; /* 绝对的定位: 1. 脱标 2. 做遮盖效果, 提升层级 3. 设置绝对定位之后, 不区分行内元素和块级元素,
- 都能设置宽高.*/ position: absolute; } .box2{ background-color: green; } .box3{
- background-color: blue; } span{ width: 100px; height: 100px; background-color:
- pink; position: absolute; }
- </style>
- </head>
- <body>
- <div class="box1">
- </div>
- <div class="box2">
- </div>
- <div class="box3">
- </div>
- <span>
- 文字
- </span>
- </body>
- </HTML>
绝对定位的特性
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- body{ width: 100%; height: 2000px; border: 10px solid green; } .box{ width:
- 200px; height: 200px; background-color: red; /* 绝对定位参考点: 1. 当我使用 top 属性描述的时候
- 是以页面的左上角 (跟浏览器的左上角区分) 为参考点来调整位置 2. 当我使用 bottom 属性描述的时候. 是以首屏页面左下角为参考点来调整位置.
- */ position: absolute; top: 100px; /*bottom: 100px;*/ left: 18px; }
- </style>
- </head>
- <body>
- <div class="box">
- </div>
- </body>
- </HTML>
绝对定位参考点
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border:
- 5px solid red; margin: 100px; /* 父盒子设置相对定位 */ position: relative; padding:
- 50px; } .box2{ width: 300px; height: 300px; background-color: green; position:
- relative; } .box p{ width: 100px; height: 100px; background-color: pink;
- /* 子元素设置了绝对定位 */ position: absolute; top: 0; left: 0; } /* 父辈元素设置相对定位,
- 子元素设置绝对定位, 那么会以父辈元素左上角为参考点 这个父辈元素不一定是爸爸, 它也可以是爷爷, 曾爷爷. 如果父亲设置了定位, 那么以父亲为参考点.
- 那么如果父亲没有设置定位, 那么以父辈元素设置定位的为参考点 */
- </style>
- </head>
- <body>
- <div class="box">
- <div class="box2">
- <p>
- </p>
- </div>
- </div>
- </body>
- </HTML>
绝对定位以盒子作为参考点
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border:
- 5px solid red; margin: 100px; /* 父盒子设置相对定位 */ position: absolute; padding:
- 50px; } .box p{ width: 100px; height: 100px; background-color: pink; /*
- 子元素设置了绝对定位 */ position: absolute; top: 10px; left: 20px; }
- </style>
- </head>
- <body>
- <!-- 不仅仅是父相子绝, 父绝子绝 , 父固子绝, 都是以父辈元素为参考点 . 注意了: 父绝子绝, 没有实战意义, 做站的时候不会出现父绝子绝.
- 因为绝对定位脱离标准流, 影响页面的布局. 相反'父相子绝'在我们页面布局中, 是常用的布局方案. 因为父亲设置相对定位, 不脱离标准流, 子元素设置绝对定位,
- 仅仅的是在当前父辈元素内调整位置信息. -->
- <div class="box">
- <p>
- </p>
- </div>
- </body>
- </HTML>
绝对定位以父辈盒子做参考点 2
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; margin:
- 100px; border: 10px solid red; position: relative; padding: 50px; } .father
- p{ width: 100px; height: 100px; background-color: yellow; position: absolute;
- top: 10px; left: 40px; }
- </style>
- </head>
- <body>
- <div class="father">
- <p>
- </p>
- </div>
- </body>
- </HTML>
绝对定位的盒子无视父辈的 padding
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; /*margin: 0 auto;*/ position: relative; left: 50%; margin-left: -480px; /* 设置绝对定位之后, margin:0 auto; 不起任何作用, 如果想让绝对定位的盒子居中. 当做公式记下来 设置子元素绝对定位, 然后 left:50%; margin-left 等于元素宽度的一半, 实现绝对定位盒子居中 */ } </style> </head> <body> <div class="box"> <div class="c"> </div> </div> </body> </HTML>
绝对定位盒子居中
2.3, 固定定位 特性: 脱标, 遮盖, 提成层级, 固定位置
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style type="text/css"> *{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background-color: red; /* 固定定位: 固定当前的元素不会随着页面滚动而滚动, 特性: 1. 脱标 2. 提升层级 3. 固定不变 不会随页面滚动而滚动 参考点: 设置固定定位, 用 top 描述. 那么是以浏览器的左上角为参考点 如果用 bottom 描述, 那么是以浏览器的左下角为参考点 作用: 1. 返回顶部栏 2. 固定导航栏 3. 小广告 */ position: fixed; bottom: 30px; right: 40px; } </style> </head> <body> <div> <p> </p> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </div> </body> </HTML>
固定定位特性和应用场景
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> 固定导航栏 </title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; } body{ /* 给 body 设置导航栏的高度, 来显示下方图片的整个内容 */ padding-top: 49px; } .wrap{ width: 100%; height: 49px; background-color: #000; /* 设置固定定位之后, 一定一定要加 top 属性和 left 属性 */ position: fixed; top: 0; left: 0; } .wrap .nav{ width: 960px; height: 49px; margin: 0 auto; } .wrap .nav ul li{ float: left; width: 160px; height: 49px; text-align: center; } .wrap .nav ul li a{ width: 160px; height: 49px; display: block; color: #fff; font: 20px/49px "Hanzipen SC"; background-color: purple; } .wrap .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <ul> <li> <a href="#"> 网页开发 </a> </li> <li> <a href="#"> 网页开发 </a> </li> <li> <a href="#"> 网页开发 </a> </li> <li> <a href="#"> 网页开发 </a> </li> <li> <a href="#"> 网页开发 </a> </li> <li> <a href="#"> 网页开发 </a> </li> </ul> </div> </div> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> <img src="./bojie.jpg" alt=""> </body> </HTML>
固定定位_固定导航栏
三, 父相子绝
当父盒子设定为相对定位, 子盒子绝对定位的参考点是父盒子的左上角. 如果父盒子设定为绝对定位或者固定定位, 子盒子同样是以父盒子的左上角做参考点, 但是那样, 父盒子就脱离标准流, 没什么意义. 所以一般情况下, 都是要遵从 "父相子绝" 的原则. 附一个父相子绝的案例, 如下:
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /* 父盒子设置相对定位 */ position: relative; padding: 50px; } .box2{ width: 300px; height: 300px; background-color: green; position: relative; } .box p{ width: 100px; height: 100px; background-color: pink; /* 子元素设置了绝对定位 */ position: absolute; top: 0; left: 0; } /* 父辈元素设置相对定位, 子元素设置绝对定位, 那么会以父辈元素左上角为参考点 这个父辈元素不一定是爸爸, 它也可以是爷爷, 曾爷爷. 如果父亲设置了定位, 那么以父亲为参考点. 那么如果父亲没有设置定位, 那么以父辈元素设置定位的为参考点 */ </style> </head> <body> <div class="box"> <div class="box2"> <p> </p> </div> </div> </body> </HTML>
来源: https://www.cnblogs.com/NuoMiGao/p/10129322.html