阿超 > position-try

position-try

2024-09-22

前端

教育的胜利，可以压倒国民性。——爱默生

https://css-tricks.com/almanac/properties/p/position-try-fallbacks/

今天分享一个position-try的css属性

它就像字面意思是说：

位置-尝试

代表着 它在页面移动时尽可能尝试调整位置

举个栗子：

1
2
3
4
5
6
7
.target {
  position: absolute;
  position-anchor: --my-anchor;

  position-area: top;
  position-try-fallbacks: bottom;
}

我写下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>
    /* 定义一个锚点元素 */
    .anchor {
        anchor-name: --my-anchor; /* 使用自定义的锚点名称 */

        height: 80px; /* 高度设为80px */
        aspect-ratio: 1; /* 宽高比保持1:1 */
    }

    /* 定义目标元素 */
    .target {
        position: absolute; /* 绝对定位 */
        position-anchor: --my-anchor; /* 使用自定义的锚点定位 */
        position-area: top; /* 默认在顶部对齐 */
        position-try: bottom; /* 尝试从底部定位 */

        width: 80px; /* 宽度设为80px */
        aspect-ratio: 1; /* 宽高比保持1:1 */
    }

    /* 设置页面主体样式 */
    #mainstay,#article{
        position: initial !important;
    }
    .tmp-container {
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */

        height: 200vh; /* 页面高度设置为两倍视窗高度 */

        font-family: monospace; /* 使用等宽字体 */
    }

    /* anchor 样式 */
    .anchor {
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */

        border-radius: 10px; /* 圆角设置为10px */

        background-color: #ffbd59; /* 设置背景颜色为黄色 */
    }

    /* target 样式 */
    .target {
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */

        border-radius: 10px; /* 圆角设置为10px */
        background-color: #cb6ce6; /* 设置背景颜色为紫色 */
    }

    /* 如果浏览器支持 position-try: inset-area(bottom) 属性，则应用 */
    @supports (position-try: inset-area(bottom)) {
        .target {
            position-try: inset-area(bottom); /* 尝试从底部插入区域定位 */
        }
    }

    /* 如果浏览器支持 inset-area: top 属性，则应用 */
    @supports (inset-area: top) {
        .target {
            inset-area: top; /* 将插入区域设置为顶部 */
        }
    }
</style>
<div class="tmp-container">
    <div class="anchor">anchor</div>
    <div class="target">target</div>
</div>
anchor
target