position属性概述
CSS的position属性挺牛的，一旦都设置成绝对定位，元素就可以不管原来的位置了，直接去找离它近又有定位的父元素，这样我们就有更多空间设计各种好看的网页版式！
position属性用法
调整元素位置，只需要说清楚两件事：选哪个元素以及它的具体属性。搞明白了元素选择器，就好比有了导航仪，知道了去哪儿改；而设置属性，就跟给元素定个坐标差不多。这么一来，就算是页面上的所有元素，咱们也可以随意调节它们的位置
top属性详解
Top其实挺好使的，能让元素和顶层祖先拉近或远离！用加减号就搞定，元素就能上下跳动！就说咱们，比如”id=’example'”这个标签设成top值为50px，那元素到最上层元素顶端就只差50px~
.element {
position: value;
}
利用Top属性，可以精确控制网页要素位置。像固定导航栏在顶部或搞点儿炫酷的动效，这对它来说小菜一碟！
right属性详解
你想过吗，’right’这个属性是干啥用的？给你说说它就是用来调控元素和离得最近并已定位的祖先元素右面之间的距离哒。想把元素挪远点？给’third-right’上个正数就成！比如，在HTML里加句”third-right: 50px;”,这就表示……
搞定横排对齐，只需要调整元素’right’属性就行！比如做响应式设计的时候，给某些元素加点这个属性，看它们老老实实在右边站着，稳如泰山！
left属性详解
说到左右，咱们得留意下这个左属性了！它跟右属性一样，也是定位的妙招儿。你看，设个负数左属性值，就能知道元素和最近的定位元素是不是挨上了。简单点儿说，left后头添个50px(即 left: 50px;)，那么这个元素就老老实实地站在离它不远的调位元素旁边了。
把东西对整齐，就能让站得直溜挺的感觉出来了。网站导航和分栏布局一下子整洁明朗。
.element {
position: absolute;
top: 50px;
}
绝对定位实例分析
咱们就拿一个实例来详细说说什么是绝对定位和它的那些特性！
想想看，你有个大碗，里面装着三个小碗div1、div2、div3。要把它们摆在顶上左边、顶上右边和底下右边。
.element {
position: absolute;
right: 50px;
}
css
.parent {
position: relative;
width: 500px;
height: 300px;
.element {
position: absolute;
left: 50px;
}
background-color:#f0f0f0;
}
.child1 {
position: absolute;
top:0;
left:0;
.child2 {
right:0;
.child3 {
Div 1
Div 2
Div 3
bottom:0;
.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #ccc;
}
.child1, .child2, .child3 {
position: absolute;
width: 50px;
height: 50px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
}
.child1 {
top: 0;
left: 0;
}
.child2 {
top: 0;
right: 0;
}
.child3 {
bottom: 0;
right: 0;
}
哎哟我去，这段代码看完，咱们才知道那个叫「老爸容器」的东西给自己设了个相对定位（position：relative），还搞出了宽高，甚至连背影也安排得妥妥当当！然后来看看那个”三娃儿div块”，这小家伙更牛逼，竟然会用绝对定位（position：absolute），再配上 top、right、bottom、left 这种神秘的数字，想摆哪儿就摆哪儿，真是太棒了！
看看这些例子你就明白！用好了CSS样式表里的绝对定位以及其他相关功能，网页上的元素完全任凭你摆布，简单几步就能创造各种炫酷排版，真是超赞的便利
总结与展望
今天我们来聊聊CSS里的绝对定位（top,right,left），它到底有什么作用，应该怎么用呢?学会这个小技巧，你就能在搞网页时更加自如地运用CSS，让你的网页变得更炫酷哦!
学CSS，多动手多试试各种搭配，找找它们的不同。失败不怕，学会转变修正就好，慢慢就能体验CSS的魅力和技巧了。
今天我们就来聊聊浏览器是怎么处理CSS里的那个“绝对定位”的功能。希望你看完之后能更好地理解前端开发，甚至会爱上这行！
评论0