前言：
目前大家对“css怎么让盒子靠右”都比较重视，大家都需要了解一些“css怎么让盒子靠右”的相关知识。那么小编在网摘上网罗了一些对于“css怎么让盒子靠右””的相关内容，希望同学们能喜欢，姐妹们一起来学习一下吧！图1
一、先理一下position有多少种用法，再开始实例。
absolute 绝对定位，相对于非static的父元素fixed 绝对定位，相对于浏览器relative 相对定位，相对默认位置static 默认值。
以上的1，2，3都是通过top,left,right,bottom属性来生效。
二、用实例去理解吧，先做个盒子，里面有一个公式。
图2
图3
三、面积应该是a的平方，可我们的2却不在平方的位置，于是我们就用relative相对定位来完成这个工作，相对定位就是相对于原来的位置进行调整。
图4
图5
四、我们加一个关闭按钮，让它位于盒子的右上角，用absolute绝对定位来实现，absolute是根据非static的父元素来绝对定位的，这个和fixed不一样，通过例子来理解吧，先做一个按钮，然后给按钮一个absolute定位，让它距离右边是0像素。
图6
图7
五、看到了没，按钮居然不在盒子里面，那是因为按钮的父元素box1是static的，只有父元素是非static了以后，position的absolute才会对父元素绝对定位，试试看吧，我们把父元素加上一个非static的position属性。
图8
图9
六、按钮终于进盒子里面了，现在我们可以了解fixed了，它是浏览器的绝对定位，无论我们如何滚动浏览器，它都会在定好的位置，为了能让浏览器上下滚动，我在下面加了很多换行，无论你怎么滚动，盒子的位置不变。
图9
图10
七、试着改变一下fixed的位置，再次强调，它是浏览器的绝对定位。
图11
图12
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 200px; height: 100px; line-height: 100px; /* 让盒子内容垂直居中 */ background: #ccc; /* 背景色 */ position: fixed; left: 20px; top: 10px; } .up-span{ position: relative; top: -6px;/* 配合top,left,right,bottom来实现位置变化*/ } .btclose{ position: absolute; right: 0px; } </style></head><body> <div class="box1">面积公式S=a<span class="up-span">2</span> <button class="btclose">关闭</button> </div> <!-- 我们用span标签把2独立出来 --> <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行 <br>这里是换行</body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css怎么让盒子靠右
