教育的胜利，可以压倒国民性。——爱默生
https://css-tricks.com/almanac/properties/p/position-try-fallbacks/
今天分享一个position-try-fallbacks的css属性
它就像字面意思是说：
位置-尝试-反馈
代表着 它在页面移动时尽可能调整位置进行反馈
举个栗子：
代码语言：javascript复制.target {
position: absolute;
position-anchor: --my-anchor;
position-area: top;
position-try-fallbacks: bottom;
}我写下代码：
代码语言：javascript复制<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 { 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.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; /* 将插入区域设置为顶部 */ } }
anchor
target
