绝对定位absolute
时间: 2024-06-08 20:08:17 浏览: 10
绝对定位(absolute positioning)是一种元素定位的方式,通过设置元素的position属性为absolute,使得元素脱离文档流,并相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素,则相对于最初的包含块(html)进行定位。
相对于绝对定位,相对定位(relative positioning)是一种元素定位的方式,通过设置元素的position属性为relative,元素仍然处于文档流中,不会影响其他元素的位置。相对定位是相对于元素自身所在的位置定位,通过设置偏移量(如top、left等属性)来改变元素相对于自身位置的偏移。
需要注意的是,如果没有父元素设置相对定位或绝对定位,那么设置了absolute的元素会相对于html根元素进行定位,即相对于整个浏览器窗口进行定位。
总结起来,绝对定位使得元素脱离文档流,并相对于最近的已定位的祖先元素进行定位,如果没有已定位的祖先元素,则相对于最初的包含块进行定位。而相对定位仍然处于文档流中,通过设置偏移量来改变元素相对于自身位置的偏移。
相关问题
html 绝对定位
HTML 中的绝对定位可以用于将元素相对于其最近的已定位祖先元素(position 属性的值为 absolute、fixed 或 relative 的元素)进行定位,或者相对于文档的初始包含块进行定位。要使用绝对定位,需要在 CSS 中设置元素的 position 属性为 absolute。
例如,以下代码将一个 div 元素设为绝对定位,并将其相对于其最近的已定位祖先元素进行定位:
```
<div style="position: relative;">
<div style="position: absolute; top: 20px; left: 50px;">绝对定位的元素</div>
</div>
```
在这个例子中,外层 div 元素被设置为相对定位,内层 div 元素被设置为绝对定位,并且设置了 top 和 left 属性来指定其相对于其最近的已定位祖先元素的位置。
如果没有已定位的祖先元素,则绝对定位的元素将相对于文档的初始包含块进行定位。
uniapp绝对定位
在 Uniapp 中使用绝对定位的方式有两种,一种是使用内联样式,另一种是使用 CSS 类。
1. 使用内联样式:
在模板代码中,给需要绝对定位的元素添加 style 属性,并设置 position 属性为 absolute,再通过 top、bottom、left、right 等属性来控制元素的位置。例如:
```
<view style="position: absolute; top: 10px; left: 10px;">Hello, Uniapp!</view>
```
2. 使用 CSS 类:
首先,在页面的 style 标签或者外部的样式文件(如 app.vue 或者 xxx.vue 的 style 标签)中定义一个 CSS 类,设置它的 position 属性为 absolute,然后在需要绝对定位的元素上添加该类名。例如:
```css
/* 在页面的 style 标签或者外部的样式文件中定义 */
.absolute-position {
position: absolute;
top: 10px;
left: 10px;
}
```
```html
<!-- 在模板代码中使用 -->
<view class="absolute-position">Hello, Uniapp!</view>
```
这两种方式都能实现绝对定位效果,选择哪种方式取决于你的需求和个人偏好。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)