简介
Position属性确认元素的定位
常用属性值
- static-静态定位
- relative-相对定位
- absolute-绝对定位
- fixed-浮动定位
static是默认定位值，它的定位元素不受top、left、right、bottom的影响，也就是说你给元素设置这四个属性的任何值都没有效果
relative相对定位，设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。
比如说在做表单布局的时候，有时候label的值并没有和输入框上下居中对齐，它有一点点偏下，效果不是很好看，这个时候我们可以给label向上设置一下偏移让他们居中对齐
<div> <label class="relative" for="name">用户名：</label> <input type="text" id="name" /> </div> .relative { position: relative; top: -3px; }absolute是绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，那么就按body定位
absolute最典型的例子就是结合relative一块完成效果，比如我有一个div，它是在页面居中的，但是它的宽度和高度是动态的，我们还有一个span标签希望永远在这右下角10px的位置，这个时候我们就可以利用absolute完成
<div> <span></span> </div> // div设置成相对定位，它是父结点 div { positon:relative; } // 子元素，span设置absolute，这样它就会相对div去做绝对定位 div span { position:absolute; right:10px; bottom:10px; }fixed是相对视口定位的，简称浮云定位，这个意味着就像你滚动页面，它始终位于同一个位置，top、left、right、bottom用于设置当前元素的位置。
常用的例子就是页面右下角，滚动到顶部的的功能，我们可以对这个元素设置fixed浮动定位，当用户一直向下滚动浏览网页后，想一下子回到顶部，它只要点这个元素就行了，因为之个元素是浮云定位，所以永远是在用户可视范围的右下角
<div>回到顶部</div> div{ position:fixed; right:20px; bottom:20px; }觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
1.《如何让定位元素居中显示、绝对定位元素居中!》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《如何让定位元素居中显示、绝对定位元素居中!》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/keji/3330297.html