CSS中定位布局的细节有哪些

这篇文章主要讲解了“CSS中定位布局的细节有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中定位布局的细节有哪些”吧！相对定位：盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。位置描述词：
left: 向右移动； right 向左移动；top 向下移动；bottom 向上移动
（当里面值为负数的时候，往相反方向移动）举个例子：
原来：

将 p 设置成相对定位：性质相对定位的元素，本质上仍在原来的位置，只不过在新的地方渲染出现，不会对页面其它元素产生影响。用途用来微调元素位置相对定位的盒子可以用来做绝对定位的参考盒子举个例子：这个时候效果是这样：

会发现鼠标悬浮在上面的时候，导航那一块区域都会下沉
我们给它设置了相对定位并微调之后：
这样就可以解决刚刚的问题了绝对定位：盒子以坐标进行位置描述，拥有自己绝对位置。绝对定位的参免费云主机、域名考盒子：
绝对定位的盒子会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以也被称作 “子绝父相”。位置描述词：
left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离举个例子：
绝对定位的盒子垂直居中：绝对定位的盒子水平居中：堆叠顺序 z-index 属性设置绝对定位元素的压叠顺序.
是一个没有单位的正整数，数值大的能够压住数值小的（即数值大的显示在上层）举个例子：此时效果如下：
这个时候我们想让box1显示在上层，就设置一个z-index 属性。
看看效果：
用途绝对定位用来“压盖”，“遮罩”的效果
可以结合 CSS 精灵使用
可以结合 JS 实现一些动画固定定位：不管页面如何滚动，它永远以页面为参考点，固定在那里。位置描述词：
left：到左边的距离；right：到右边的距离；top：到上边的距离；bottom：到下边的距离可以用来实现一些元素要一直浮现在当前窗口前，比如浏览一个页面时的返回顶部按钮，会一直出现在当前页面的某个位置举个例子：

效果如下：
当页面到下方时，右下角返回顶部的按钮位置不变。
感谢各位的阅读，以上就是“CSS中定位布局的细节有哪些”的内容了，经过本文的学习后，相信大家对CSS中定位布局的细节有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: 怎么理解jQuery代码优化的基本事件

这篇文章主要介绍“怎么理解jQuery代码优化的基本事件”，在日常操作中，相信很多人在怎么理解jQuery代码优化的基本事件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么理解jQuery代码优化的基本事件”的疑惑有所帮助！接…