定位
主要内容
- 相对定位
- 绝对定位
- 固定定位
相对定位
相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。
相对定位的性质
相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成，不会对页面其他元素产生任何影响“影子”。
相对定位的用途
-
相对定位用来微调元素位置
-
相对定位的元素，可以当做绝对定位的参考盒子
例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } nav { width: 960px; height: 40px; margin: 40px auto; } nav ul { list-style: none; } nav ul li{ float: left; width: 120px; height: 40px; text-align: center; line-height: 40px; } nav ul li a { display: block; width: 120px; height: 40px; background-color: orange; color: white; text-decoration: none; } nav ul li a:hover { border-top: 3px solid red; position: relative; top: -3px; background-color: gold; } </style> </head> <body> <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> <li> <a href="">网站栏目</a> </li> <li> <a href="">网站栏目</a> </li> </ul> </nav> </body> </html>
相对定位的位置描述词
-
left：盒子右移
-
right：盒子左移
-
top：盒子下移
-
bottom：盒子上移
值可以为负数，即往规定方向相反移动
绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
绝对定位的位置描述词
- left：到左边的距离
- right：到右边的距离
- top：到上边的距离
- bottom：到下边的距离
ps: 如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角;如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角。如图所示:
绝对定位脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
绝对定位的参考盒子
-
绝对定位的盒子并不是永远以浏览器作为基准点。
-
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”。
绝对定位的盒子垂直居中
position: absolute;
top:50%;
margin-top: -自己高度一半;
堆叠顺序z-index属性
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
有如下特性：
- 属性值大的位于上层，属性值小的位于下层。
- z-index值没有单位，就是一个正整数。默认的z-index值是0。
- 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
- 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 在body标签中box2在box1后面，所以默认box2在上层，box1在下层
设置了z-index属性可以使box1压在box2上面*/
.box1 {
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
z-index: 9999;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
position: absolute;
top: 200px;
left: 200px;
z-index: 999;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
固定定位注意事项
- 固定定位只能以页面为参考点，没有子固父相这个性质
- 固定定位脱离标准文档流
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦