返回
强势攻略 | 七日打卡-如何用绝对定位(position:absolute)巧妙布局，斩获高颜值排版
前端
2023-10-14 06:05:01
绝对定位：精妙布局的利器
在网页布局中，绝对定位是一个非常强大的工具，它可以帮助你轻松实现各种复杂布局，如浮动导航、固定侧边栏、弹出窗口等。但要有效运用绝对定位，你需要了解它的基本原理和注意事项。
绝对定位原理
绝对定位元素相对于其最近的定位祖先元素进行定位，也就是说，绝对定位元素的位置不受其兄弟元素或父元素中其他元素的影响。它具有以下特点：
- 脱离文档流：绝对定位元素脱离了文档流，因此它不会影响其他元素的位置和布局。
- 相对定位：绝对定位元素相对于其最近的定位祖先元素进行定位，可以使用top、right、bottom和left属性来设置元素的位置。
- 层叠上下文：绝对定位元素会创建自己的层叠上下文，这使得它可以覆盖其他元素，也可以被其他元素覆盖。
绝对定位注意事项
在使用绝对定位时，需要特别注意以下几点：
- 必须指定父元素：绝对定位元素必须指定父元素，否则它将相对于整个文档进行定位，这可能会导致布局混乱。
- 偏移量：绝对定位元素的位置是由相对于父元素的偏移量决定的，因此在设置偏移量时，你需要考虑父元素的大小和位置。
- 层叠上下文：绝对定位元素会创建自己的层叠上下文，这意味着它可以覆盖其他元素，也可以被其他元素覆盖。因此，在使用绝对定位元素时，你需要注意元素的层叠顺序。
实战演练：七天打卡布局实战
为了帮助你更好地理解如何使用绝对定位进行布局，我们准备了一个七天打卡布局实战案例，手把手教你如何使用绝对定位实现一个美观实用的打卡页面。
第一天：准备工作
- 创建一个新的HTML文件并添加必要的HTML结构，包括
<header>,<main>,<footer>和<div>元素。 - 在
<head>元素中添加必要的CSS样式表链接。
第二天：设置父元素
- 为
<main>元素添加position: relative;样式，使其成为绝对定位元素的父元素。 - 为
<div>元素添加position: absolute;样式，使其成为绝对定位元素。
第三天：设置偏移量
- 为
<div>元素添加top: 10px;样式，使其距离父元素顶部10像素。 - 为
<div>元素添加left: 10px;样式，使其距离父元素左边10像素。
第四天：创建打卡按钮
- 在
<div>元素中添加一个<button>元素，作为打卡按钮。 - 为
<button>元素添加适当的样式，使其具有合适的颜色、大小和字体。
第五天：添加打卡记录
- 在
<div>元素中添加一个<ul>元素，作为打卡记录列表。 - 为
<ul>元素添加适当的样式，使其具有合适的列表样式。 - 在
<ul>元素中添加若干<li>元素，作为打卡记录项。 - 为
<li>元素添加适当的样式，使其具有合适的颜色、大小和字体。
第六天：添加打卡日期
- 在每个
<li>元素中添加一个<span>元素，作为打卡日期。 - 为
<span>元素添加适当的样式，使其具有合适的颜色、大小和字体。 - 在
<span>元素中添加打卡日期文本。
第七天：收尾工作
- 为页面添加必要的JavaScript代码，实现打卡功能。
- 对页面进行测试，确保打卡功能正常工作。
总结
通过七天打卡布局实战，你已经掌握了如何使用绝对定位实现完美布局的基本技巧。只要充分理解绝对定位的原理和注意事项，你就可以轻松创建出各种美观实用的页面布局。
在布局的过程中，你需要注意以下几点：
- 合理使用绝对定位：不要滥用绝对定位，只在必要时使用。
- 避免层叠上下文嵌套：尽量避免层叠上下文嵌套，以免导致布局混乱。
- 使用媒体查询：在不同的设备和屏幕尺寸上，使用媒体查询来调整布局，以确保良好的用户体验。
