CSS中怎么实现定位布局，哪些知识点要了解
发布时间：2023-08-31 14:15:32 所属栏目：语言 来源：
导读：这篇文章给大家分享的是“CSS中怎么实现定位布局，哪些知识点要掌握”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。
本篇文章给大家带来了cs
本篇文章给大家带来了cs
|
这篇文章给大家分享的是“CSS中怎么实现定位布局，哪些知识点要掌握”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。 本篇文章给大家带来了css定位布局的相关知识，下面我们就来看一下什么是相对定位、绝对定位以及固定定位不同的元素性质与用途等知识，希望对大家有帮助。 1. 相对定位 1.1) 什么是相对定位 相对定位：盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。 位置描述词： left: 向右移动； right 向左移动；top 向下移动；bottom 向上移动 （当里面值为负数的时候，往相反方向移动） 举个例子： 原来： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> * { margin: 0; padding: 0; } p { width: 500px; height: 500px; border: 1px solid #000; margin: 50px auto; } p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px; } </style></head><body> <p> <p></p> </p></body></html> 将 p 设置成相对定位： p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px;} 1.2）相对定位的性质与用途 性质 相对定位的元素，本质上仍在原来的位置，只不过在新的地方渲染出现，不会对页面其它元素产生影响。 用途 用来微调元素位置 相对定位的盒子可以用来做绝对定位的参考盒子 举个例子： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> * { margin: 0; padding: 0; } nav { width: 780px; height: 50px; margin: 40px auto; } nav ul { list-style: none; } nav ul li { float: left; width: 156px; height: 50px; line-height: 50px; text-align: center; } nav ul li a { display: block; width: 156px; height: 50px; background-color: lightcyan; color: #000; text-decoration: none; } nav ul li a:hover { border-top: 3px solid red; } </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> </ul> </nav></body></html> 这个时候效果是这样： 会发现鼠标悬浮在上面的时候，导航那一块区域都会下沉 我们给它设置了相对定位并微调之后： nav ul li a:hover { border-top: 3px solid red; position: relative; top: -3px;} 这样就可以解决刚刚的问题了 2. 绝对定位 2.1) 什么是绝对定位 绝对定位：盒子以坐标进行位置描述，拥有自己绝对位置。 绝对定位的参考盒子： 绝对定位的盒子会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。 这个盒子通常是相对定位的，所以也被称作 “子绝父相”。 位置描述词： left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离 举个例子： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } .box { position: absolute; width: 500px; height: 300px; left: 200px; top: 100px; background-color: antiquewhite; } </style></head><body> <p class="box"> </p></body></html> 2.2）绝对定位的性质与用途 绝对定位的盒子垂直居中： .box { position: absolute; top: 50%; margin-top: -自己高度一半;} 绝对定位的盒子水平居中： .box { position: absolute; left: 50%; margin-left: -自己宽度一半;} 堆叠顺序 z-index 属性 设置绝对定位元素的压叠顺序. 是一个没有单位的正整数，数值大的能够压住数值小的（即数值大的显示在上层） 举个例子： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } .box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; } .box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; } </style></head><body> <p class="box1"></p> <p class="box2"></p></body></html> 这个时候我们想让box1显示在上层，就设置一个z-index 属性。 .box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; z-index: 100;}.box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; z-index: 1;} 用途 绝对定位用来“压盖”，“遮罩”的效果 可以结合 CSS 精灵使用 可以结合 JS 实现一些动画 3. 固定定位 3.1) 什么是固定定位 固定定位：不管页面如何滚动，它永远以页面为参考点，固定在那里。 位置描述词： left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离 .box { position: fixed; top: 100px; left: 100px;} 3.2）固定定位的性质与用途 可以用来实现一些元素要一直浮现在当前窗口前，比如浏览一个页面时的返回顶部按钮，会一直出现在当前页面的某个位置 举个例子： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位</title> <style> * { margin: 0; padding: 0; } .box { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background-color: rgba(78, 209, 226, 0.5); cursor: pointer; font-size: 24px; } </style></head><body> <a class="box">^</a> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p></body></html> 效果如下： 当页面到下方时，右下角返回顶部的按钮位置不变。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
