当前位置：首页 > article >正文

web前端9--定位

article 2025/1/29 9:55:45

-定位

CSS中的定位是一种用于控制元素在页面中的布局的属性。通过定位，可以精确地确定元素在页面中的位置。

1、相对定位

！！！一般用于微调

CSS中的一种定位方式，通过设置元素的`position`属性为`relative`来实现。相对定位使元素相对于其正常位置进行偏移，但不会影响其在文档流中的位置。

- 元素的移动是相对于它在文档流中的正常位置。偏移的方向由`top`、`right`、`bottom`、`left`属性决定。
- 相对定位的元素不会脱离文档流，它仍然占据着在文档流中的位置。
- 相对定位不会对其他元素造成影响，它的移动不会引起周围元素的重排。
- 不影响元素本身的任何特性

```css
        .box1{
            position: relative;
            top: 10px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
```

2、绝对定位

通过设置元素的`position`属性为`absolute`来实现。

1、绝对定位使元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于视口进行定位。

2、在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

<!-- 子绝父相 -->
```css
        .box2{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
```

3、绝对定位的元素脱离了文档流，不再占据标准流中的位置。
绝对定位的元素导致父元素的高度塌陷，父元素设置高度

4、绝对定位的元素可以手动设置宽度和高度，
使其具有特定的尺寸。使元素转换为块元素

5、使用绝对定位元素再父级中居中的方法

//定位到视口中心
```css
        .box{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
```

3、固定定位

position: fixed;

1、固定定位是CSS中的一种定位方式，它使元素相对于浏览器视口进行定位。

2、固定定位的元素会随着用户滚动页面而保持固定的位置，不受页面滚动的影响。

```css
        .a{
            position: fixed;
            top: 200px;
            right: 0px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
```