阿超 > position-try-fallbacks

position-try-fallbacks

2024-09-23

前端

教育成功的秘密，在于尊重学生。——爱默生

昨天我们聊到了

position-try | 阿超

今天是它的拓展，我们通过@position-try定义移动到的位置，然后用position-try使用

语法例如：

1
2
3
4
5
6
7
8
9
10
@position-try --my-custom-position {
  position-area: top left;
  width: 50px;
}

.target {
  position: absolute;
  position-area: top right;
  position-try-fallbacks: --my-custom-position;
}

我们这里还是用昨天的例子，定义一个

1
2
3
4
5
/* 定义自定义的 `position-try` 规则，用于小型目标元素的样式 */
@position-try --compact-target {
    height: 40px; /* 高度设为40px */
    margin: 0px;  /* 没有边距 */
}

然后我们使用：

1
2
3
4
5
6
/* 如果浏览器支持 position-try: inset-area(bottom) 属性，则应用 */
    @supports (position-try: inset-area(bottom)) {
        .target {
            position-try: --compact-target, inset-area(bottom); /* 尝试从底部插入区域定位，同时应用 --compact-target 样式 */
        }
    }

效果：

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
74
75
76
77
78
79
<style>
    /* 定义自定义的 `position-try` 规则，用于小型目标元素的样式 */
    @position-try --compact-target {
        height: 40px; /* 高度设为40px */
        margin: 0px;  /* 没有边距 */
    }

    /* 定义一个锚点元素 */
    .anchor {
        anchor-name: --my-anchor; /* 使用自定义的锚点名称 */

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

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

        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: --compact-target, inset-area(bottom); /* 尝试从底部插入区域定位，同时应用 --compact-target 样式 */
        }
    }

    /* 如果浏览器支持 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