嗨~你好我可是个深深喜欢前端开发的狂热者，特别痴迷于CSS里的绝对定位功能。你知道吗？利用这个神奇的工具，我们可以随意设计网页布局，无论是围绕着某个父元素展开，还是覆盖整个页面，都能玩转各种创意和视觉效果！下面就让我来详细介绍一下绝对定位到底如何运用，顺便附上实践代码给你看看吧～
相对于参考对象进行定位
听过没，absolute定位功能真的超赞！只要把元素定位设置成这个，你会发现它就像个“小跟班”，总是跟着最近定位的父元素跑啊跑。这样一来，我们就可以随便找个父元素当参照物，然后精准地调整元素在网页上的位置！
曾经我在做网页时也遇到了个小问题哦——怎么让那个小弹窗跟着按钮走？别担心，其实方法超级简单的，只要把小弹窗设成绝对定位，然后给它跟按钮绑个【伴侣】就欧拉，这样小弹窗就会紧紧地跟随着按钮一起飞舞~这个绝对定位真的是个好东西，不光能解决很多布局和交互问题，还能让整个页面变得更加干净利落，美不胜收！
告诉你，这叫绝对定位，可不只是帮咱们弄好看的网页布局，关键是让页面更有意思。找个参考对象，想怎么摆就怎么摆元素，你的页面看上去就酷炫了！
脱离文档流
要记住，你要是给东西加上绝对定位，那他们可就不安分！本来，他们是应该固定在同一个位置的，但是现在居然会占用其他元素的空间！说白了，它们虽然能到处跑，但是却把其他元素打乱了原本的顺序。
做项目时，那一次要把导航栏放到那个小角落固定住。用CSS里的absoluteposition，加上rightbottom，就行了！这样的话，不论你怎样拖拽页面，导航栏都还是老老实实呆在原地，方便你们找东西呀~
总的来说，这个绝对定位功能真的是牛逼到爆表！想让哪个东西（广告，温馨提示啥的）出现在网页哪里都行，而且其他的内容一点儿也不受影响。有了这个功能，设计网页变得更灵活，效果也更丰富了。
使用top、right、bottom、left属性进行定位
大家都知道，咱们生成网页时，可以选择用相对定位或绝对定位来控制元素位置，但除此以外，还有另一种方法——借助top,right,bottom和left等属性微调元素位置！这几个属性就是用来设置元素跟参照物体之间的左、右、上、下四个方向的距离的，这样一来，就能随心所欲地把元素放在任何地方了哟。
想要图片滚动吸睛是？就把它放在中间，占半个屏幕。然后用负Margin轻轻拉伸下，搞定！再利用top、right、bottom和left这些东西来微调下位置，页面看着更生动，显得也很专业实用又漂亮
这个定位功能真给力！不管你想要放在中心位置，让它固定不变，或者随心所欲地移动，只需要简单的top、right、bottom、left四个参数就搞定！这种精确的定位让我们的设计更具创新性，网页界面也更有趣活泼~
通过z-index属性进行层叠控制
定位不是小事儿，除了定位坐标外，我们还能用绝对定位搞点花样，比如给某个元素调高z-index值，这就相当于给你的元素排了个队，数值越大就越靠前，数值小的可能就被其他元素挡住看不见了。这样做不仅能保证页面美观，还有层级分明的视觉效果！
网页设计中，如果需要展示广告挡住底部内容的话，就把广告设成绝对定位并给它填个高点儿的z-index值，这样就能清楚地看到！这样子，人们也更容易发现重要信息，说不定还能主动关注你的广告！
利用好z-index，网页瞬间多彩起来！想要特色效果？只要调整合适的z-index值，就可以掌握元素的出场顺序，让它们呈现出层层叠加的感觉，网页的趣味性马上就上去了。
绝对定位的应用领域
定位在官方网站制作里很重要，下面是几个例子：
弹出菜单和对话框
绝对定位就是让菜单或者对话框停在你想让他们出现的地方！比如说你按下按钮想让菜单马上跳出来？那就在按钮边上用绝对定位呗！这样看起来更直观，用着也方便
网上找到了个大招，看图片就有更多商品详细内容出现。这个东西真的很好用，把位置定好了，买东西查东西都方便多了！
代码示例
平常开发时我们得用到绝对定位这个功能，因为它能做出很炫酷的效果。比如说，今天我就教你怎么用它制作弹出式菜单。
HTML结构：
html 点击我</button> <divclass="menu">菜单内容</div>
CSS样式：
css
.container{
position:relative;
}
.menu{
position:absolute;
top:100%;
left:0;
.container {
position: relative;
}
.menu {
display: none;
position: absolute;
top: 30px;
left: 0;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.menu li {
list-style: none;
}
display:none;
.trigger:hover+.menu{
display:block;
JavaScript代码：
var trigger = document.getElementById('trigger');
var menu = document.getElementById('menu');
trigger.addEventListener('click', function() {
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
});
javascript
//点击按钮显示/隐藏菜单
你只需要在按钮上点一下，就能触发下面的操作~
菜单就在那个叫’.menu’的东东里。
如果菜单是打开的，那就做这个。
menu.style.display=’none’;
}else{
menu.style.display=’block’;
}
});
这里教大家如何轻松做出一个小巧可爱的弹出式菜单，就像那个弹窗一样，只要轻轻点击一下按钮，它就会出现在按钮边上；再次点击的话，它就会消失无踪。这是通过使用绝对定位和JavaScript制成的一个简便易懂的教程！
简单说，绝对定位就是在CSS里搞个定死的位置来摆弄元素。把元素拉出来放在外面，再通过上、右下左这些属性来调整位置就行了。还有，你还能用z-index调一下元素的上下顺序。这个功能做弹出窗口、提示框这类玩意儿特好用，能让网页看起来更活泼点。试试，熟能生巧，用多了你也能玩转绝对定位，给网页设计加点新花样。
评论0