27.CSS理论_绝对定位_办公生活

创始人

2025-05-30 11:36:39

正常流程（position: relative）

● 所有元素都是默认定位
● 元素都是流动的
● 元素只是按照它们在HTML代码中的顺序排列

● 相比较于正常流程中元素不再是流动的
● 完全失去对周围元素的任何影响，可能会被重叠
● 我们可以使用顶部、底部、左侧和右侧属性。
● 为了定位该元素，这个元素会被定位到一个相对定位的容器。

● 例如我们在原来的基础上添加一个决定定位的按钮
#首先在HTML添加按钮

● 接着写CSS

button {font-size: 22px;padding: 20px;cursor: pointer;position: absolute;bottom: 50px;right: 50px;}

在这里插入图片描述

● 绝对定位需要以一个为定位基础，如果我们像一直放在页面的右下角，那么body就是我们的标杆元素

body {position: relative;
}

在这里插入图片描述

● 这样就一直是右下角的位置了，无论页面大小怎么变化，其他元素怎么变化，这个按钮的位置也不会改变