{"id":11215,"date":"2024-06-27T23:36:42","date_gmt":"2024-06-27T15:36:42","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11215"},"modified":"2026-03-04T18:14:36","modified_gmt":"2026-03-04T10:14:36","slug":"css-anchor-positioning-api","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2024\/06\/css-anchor-positioning-api\/","title":{"rendered":"\u544a\u522bJS\u6d6e\u5c42\uff0c\u5168\u65b0\u7684CSS Anchor Positioning\u951a\u70b9\u5b9a\u4f4dAPI"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11215\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=11215<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u72ec\u7acb\u57df\u540d\u4e2a\u4eba\u7f51\u7ad9\u65e0\u9700\u6388\u6743\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/202406-css-anchor.png';<\/script><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/anchor-cover.png\" width=\"480\" height=\"303\" alt=\"CSS\u951a\u70b9\u5b9a\u4f4d\u5360\u4f4d\u5c01\u9762\u56fe\" class=\"alignright clip thumb size-medium\" \/><\/p>\n<h3>\u4e00\u3001\u65b0\u7684\u738b\u724c\u7279\u6027<\/h3>\n<p>Chrome 125\u5df2\u7ecf\u6b63\u5f0f\u652f\u6301CSS\u951a\u70b9\u5b9a\u4f4d\u4e86\uff0c\u81f3\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u7eafCSS\u5b9e\u73b0\u7edd\u5bf9\u5b9a\u4f4d\u5143\u7d20A\u76f8\u5bf9\u4e8e\u4efb\u610f\u951a\u70b9\u5143\u7d20B\u7684\u5b9a\u4f4d\u6548\u679c\u4e86\uff0c\u8fc7\u53bb\u90a3\u4e9b\u4f7f\u7528JS\u5b9e\u73b0\u7684\u6d6e\u5c42\u6548\u679c\u5747\u6709\u4e86\u66f4\u597d\u7684\u5b9e\u73b0\u65b9\u5f0f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-14_224357.png\" width=\"648\" height=\"218\" alt=\"\u951a\u70b9\u5b9a\u4f4d\u517c\u5bb9\u6027\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4e0b\u9762\u8d76\u5feb\u4e00\u7779\u4e3a\u5feb\u5427\u3002<\/p>\n<h3>\u4e8c\u3001\u5148\u4ece\u6700\u7b80\u5355\u7684\u6848\u4f8b\u5f00\u59cb<\/h3>\n<p>\u4e00\u4e2a\u6309\u94ae\uff0c\u4e00\u5f20\u56fe\u7247\u3002<\/p>\n<p>\u5728\u8fc7\u53bb\uff0c\u5e0c\u671b\u70b9\u51fb\u6309\u94ae\u8ba9\u56fe\u7247\u5728\u6309\u94ae\u7684\u4e0b\u8fb9\u7f18\u5bf9\u9f50\u663e\u793a\uff0c\u8981\u4e48\u6709DOM\u7ed3\u6784\u9650\u5236\uff0c\u8981\u4e48\u501f\u52a9JS\u3002<\/p>\n<p>DOM\u7ed3\u6784\u9650\u5236\u793a\u610f\uff1a<\/p>\n<pre>&lt;div style=\"position:relative;\"&gt;\r\n  &lt;button&gt;\u6309\u94ae&lt;\/button&gt;\r\n  &lt;img src=\"1.jpg\" style=\"position:absolute;left:0;top:28px;\" \/&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u4f46\u662f\u73b0\u5728\uff0c\u76f4\u63a5CSS\u5c31\u53ef\u4ee5\u4e86\uff0cDOM\u7ed3\u6784\u53ef\u4ee5\u975e\u5e38\u968f\u610f\u3002\u4f8b\u5982\u6709\u5982\u4e0bHTML\u548cCSS\u4ee3\u7801\uff1a<\/p>\n<pre>&lt;button class=\"trigger\"&gt;\u6309\u94ae&lt;\/button&gt;\r\n\r\n&lt;img class=\"target\" src=\"1.jpg\" \/&gt;<\/pre>\n<pre>.trigger {\r\n    anchor-name: --my-anchor;    \r\n}\r\n.target {\r\n    position: absolute;\r\n    position-anchor: --my-anchor;\r\n    left: anchor(left);\r\n    top: anchor(bottom);\r\n    margin-top: .5rem;\r\n}<\/pre>\n<p>\u6211\u4eec\u5c31\u53ef\u4ee5\u5f97\u5230\u5982\u4e0b\u56fe\u6240\u793a\u7684\u5b9a\u4f4d\u6548\u679c\u4e86\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-15_001131.png\" width=\"413\" height=\"315\" alt=\"\u951a\u70b9\u5b9a\u4f4d\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5e76\u4e14\u8fd9\u79cd\u5b9a\u4f4d\u6548\u679c\u662f\u5b9e\u65f6\u7684\uff0c\u4e5f\u5c31\u662f\u6211\u4eec\u6539\u53d8\u6309\u94ae\u7684\u4f4d\u7f6e\uff0c\u4e0b\u9762\u7684\u56fe\u7247\u4f1a\u81ea\u52a8\u8ddf\u968f\u3002<\/p>\n<p>\u6211\u4e13\u95e8\u505a\u4e86\u4e2a\u6f14\u793a\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-anchor-simple-demo.php\" rel=\"noopener\" target=\"_blank\">CSS\u951a\u70b9\u5b9a\u4f4d\u57fa\u672c\u6548\u679cdemo<\/a><\/p>\n<p>\u62d6\u52a8demo\u9875\u9762\u7684\u6309\u94ae\uff0c\u4f1a\u53d1\u73b0\u56fe\u7247\u81ea\u52a8\u8ddf\u7740\u53d8\u5316\u4e86\uff0c\u5982\u4e0b\u89c6\u9891\u6240\u793a\uff08\u4e0d\u52a8\u70b9\u51fb\u64ad\u653e\uff09\uff1a<\/p>\n<p><video src='\/\/image.zhangxinxu.com\/video\/blog\/202406\/img-follow.mp4' type=\"video\/mp4\" width=\"508\" height=\"286\" preload=\"auto\" muted autoplay autobuffer loop x-webkit-airplay=\"allow\" x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\" x5-video-orientation=\"portraint\" webkit-playsinline=\"true\" playsinline=\"true\" \u200b\u200b\u200b\u200bposter=\"\/\/image.zhangxinxu.com\/image\/blog\/201806\/poster.png\"><\/video><\/p>\n<p><strong>\u6ce8\u610f\uff1a\u4f7f\u7528transform\u53d8\u6362\u5f15\u8d77\u7684\u4f4d\u79fb\u662f\u4e0d\u4f1a\u8ddf\u968f\u7684\u3002<\/strong><\/p>\n<p><strong>\u66f4\u65b0\u4e8e2024\u5e7412\u670825\u65e5<\/strong><\/p>\n<p>\u5982\u679c\u5b9a\u4f4d\u5143\u7d20\u7684\u7956\u5148\u5143\u7d20\u6709\u8bbe\u7f6e <code>position:relative<\/code>\uff0c\u90a3\u4e48\u8ddf\u968f\u6548\u679c\u4f1a\u5931\u6548\u3002<\/p>\n<h3>\u4e09\u3001\u951a\u70b9\u8bbe\u7f6e\u7684\u4e24\u79cd\u65b9\u6cd5<\/h3>\n<p>\u951a\u70b9\u8bbe\u7f6e\u603b\u5171\u6709\u4e24\u79cd\u65b9\u6cd5\u3002<\/p>\n<p>\u4e00\u79cd\u662f\u4e0a\u9762\u5c55\u793a\u8fc7\u7684\u9690\u5f0f\u951a\u70b9\uff0c\u4ee3\u7801\u793a\u610f\uff1a<\/p>\n<pre>.trigger {\r\n   anchor-name: --my-anchor;  \r\n}\r\n.target {\r\n  position-anchor: --my-anchor;\r\n  left: anchor(left);\r\n}<\/pre>\n<p>\u8fd9\u79cd\u5199\u6cd5\u9002\u7528\u4e8e1\u5bf91\u7684\u951a\u70b9\u5b9a\u4f4d\u6548\u679c\u3002<\/p>\n<p>\u4f46\u662f\uff0c\u6709\u65f6\u5019\uff0c\u6211\u4eec\u7684\u6d6e\u5c42\u5143\u7d20\u9700\u8981\u76f8\u5bf9\u4e8e\u591a\u4e2a\u951a\u70b9\u5143\u7d20\u5b9a\u4f4d\uff0c\u6b64\u65f6\uff0c\u5c31\u9700\u8981\u4f7f\u7528\u663e\u5f0f\u951a\u70b9\uff0c\u5c31\u662f\u628a\u951a\u70b9\u540d\u79f0\u5728anchor()\u51fd\u6570\u4e2d\u8fdb\u884c\u8868\u8fbe\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;p class=\"flex-space-between\"&gt;\r\n  &lt;button class=\"trigger1\"&gt;\u6309\u94ae1&lt;\/button&gt;\r\n  &lt;button class=\"trigger2\"&gt;\u6309\u94ae2&lt;\/button&gt;\r\n&lt;\/p&gt;\r\n\r\n&lt;div class=\"target\"&gt;\r\n  &lt;img src=\"1.jpg\" width=\"100%\" \/&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre>.trigger1 {\r\n   anchor-name: --anchor-a;  \r\n}\r\n.trigger2 {\r\n   anchor-name: --anchor-b;  \r\n}\r\n.target {\r\n  position: absolute;\r\n  left: anchor(--anchor-a right);\r\n  right: anchor(--anchor-b left);\r\n}<\/pre>\n<p>\u6b64\u65f6\uff0c\u5143\u7d20<code>.target<\/code>\u7684\u5de6\u8fb9\u7f18\u548c\u53f3\u8fb9\u7f18\u5c31\u5206\u522b\u76f8\u5bf9\u4e8e\u4e24\u4e2a\u4e0d\u540c\u7684\u5143\u7d20\u5b9a\u4f4d\uff0c\u6b64\u65f6\u7684\u5bbd\u5ea6\u5c31\u662f<code>.trigger1<\/code>\u548c<code>.trigger2<\/code>\u4e24\u4e2a\u5143\u7d20\u7684\u8ddd\u79bb\u3002<\/p>\n<p>\u6211\u4eec\u901a\u8fc7\u4e00\u4e2a\u5177\u4f53\u6848\u4f8b\uff0c\u611f\u53d7\u4e0b\u663e\u5f0f\u951a\u70b9\u7684\u5b9a\u4f4d\u6548\u679c\u3002<\/p>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-two-anchor-points-position-demo.php\" rel=\"noopener\" target=\"_blank\">CSS\u663e\u5f0f\u951a\u70b9\u76f8\u5bf9\u4e24\u4e2a\u5143\u7d20\u5b9a\u4f4ddemo<\/a><\/p>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u5f53\u6211\u4eec\u6539\u53d8\u4e24\u4e2a\u6309\u94ae\u8ddd\u79bb\u7684\u540c\u65f6\uff0c\u56fe\u7247\u7684\u5bbd\u5ea6\u4e5f\u968f\u4e4b\u4e0d\u65ad\u53d1\u751f\u53d8\u5316\u3002<\/p>\n<p>\u5982\u4e0b\u89c6\u9891\u6240\u793a\uff08\u4e0d\u52a8\u70b9\u51fb\u64ad\u653e\uff09\uff1a<\/p>\n<p><video src='\/\/image.zhangxinxu.com\/video\/blog\/202406\/img-follow2.mp4' type=\"video\/mp4\" width=\"502\" height=\"330\" preload=\"auto\" muted autoplay autobuffer loop x-webkit-airplay=\"allow\" x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\" x5-video-orientation=\"portraint\" webkit-playsinline=\"true\" playsinline=\"true\" \u200b\u200b\u200b\u200bposter=\"\/\/image.zhangxinxu.com\/image\/blog\/201806\/poster.png\"><\/video><\/p>\n<p>\u6211\u4eec\u53ef\u4ee5\u5229\u7528\u6b64\u7279\u6027\uff0c\u8f7b\u677e\u5b9e\u73b0\u4efb\u610f\u4e24\u4e2a\u70b9\u76f8\u8fde\u7684\u6298\u7ebf\u6548\u679c\uff0c\u5728\u8fc7\u53bb\uff0c\u7c7b\u4f3c\u8fd9\u6837\u7684\u6548\u679c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/05\/js-dom-transform-line-chart\/\">\u4e00\u5b9a\u8981\u501f\u52a9JS\u624d\u53ef\u4ee5<\/a>\u3002<\/p>\n<h3>\u56db\u3001\u951a\u70b9\u5b9a\u4f4d\u7684\u4f4d\u7f6e\u8be6\u89e3<\/h3>\n<p>\u4e0b\u9762\u8fd9\u5f20\u56fe\u5f88\u597d\u5730\u6ce8\u89e3\u4e86\u951a\u70b9\u5b9a\u4f4d\u7684\u4f4d\u7f6e\u5173\u7cfb\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-6-22_000850.png\" width=\"609\" height=\"346\" alt=\"\u951a\u70b9\u4f4d\u7f6e\u793a\u610f\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u7136\u540e\u6d6e\u5c42\u5143\u7d20\u7684\u4e0a\u4e0b\u5de6\u53f3\uff0c\u5bf9\u5e94CSS left\/bottom\/left\/right\u5c5e\u6027\uff0c\u548c\u4e0a\u9762\u951a\u70b9\u793a\u610f\u56fe\u7684\u4f4d\u7f6e\u5bf9\u9f50\uff0c\u5c31\u53ef\u4ee5\u5b9e\u73b0\u6211\u4eec\u60f3\u8981\u7684\u5b9a\u4f4d\u6548\u679c\u4e86\u3002<\/p>\n<h4>\u5982\u4f55\u5c45\u4e2d\u5b9a\u4f4d\uff1f<\/h4>\n<p>\u951a\u70b9\u5b9a\u4f4d\u662f\u6ca1\u6709center-center\u8fd9\u79cd\u5173\u7cfb\u7684\u5b9a\u4f4d\u7684\uff0c\u4f46\u4e0d\u5f71\u54cd\u5c45\u4e2d\u5b9a\u4f4d\u6548\u679c\u7684\u5b9e\u73b0\u3002<\/p>\n<p>\u56e0\u4e3a\uff1a<\/p>\n<ul>\n<li>\u4e00\u6765\u6211\u4eec\u662f\u53ef\u4ee5\u4f7f\u7528transform\u504f\u79fb\u6a21\u62df\uff1b<\/li>\n<li>\u4e8c\u662f\u6709\u65b0\u7684CSS\u7279\u6027\u4e13\u95e8\u5b9e\u73b0\u951a\u70b9\u5c45\u4e2d\u5b9a\u4f4d\uff1b<\/li>\n<li><del datetime=\"2026-03-04T10:09:13+00:00\">\u4e09\u5219\u4f7f\u7528inset-area\u5c5e\u6027\u3002<\/del> \u73b0\u5728\u6539\u540d\u4e3a <code>position-area<\/code> \u5c5e\u6027\u4e86\u3002<\/li>\n<\/ul>\n<h5>1. transform\u504f\u79fb\u6a21\u62df<\/h5>\n<p>\u4f8b\u5982\u6709\u4e00\u4e2a\u6309\u94ae\u548c\u4e00\u5f20\u7edd\u5bf9\u5b9a\u4f4d\u56fe\u7247\uff1a<\/p>\n<pre>&lt;button class=\"trigger\"&gt;\u6211\u662f\u6309\u94ae&lt;\/button&gt;\r\n\r\n&lt;img class=\"target\" src=\"1.jpg\" width=\"256\" \/&gt;<\/pre>\n<p>\u8981\u60f3\u56fe\u7247\u7684\u6c34\u5e73\u4e2d\u5fc3\u548c\u6309\u94ae\u7684\u6c34\u5e73\u4e2d\u5fc3\u5bf9\u9f50\uff0c\u53ef\u4ee5\u8bbe\u7f6e\u56fe\u7247\u7684left\u548c\u951a\u70b9\u7684center\u5bf9\u9f50\uff0c\u7136\u540etransform\u4f4d\u79fb\u4e00\u534a\u7684\u56fe\u7247\u5bbd\u5ea6\u5c31\u53ef\u4ee5\u4e86\uff0cCSS\u4ee3\u7801\u793a\u610f\uff1a<\/p>\n<pre>.trigger {\r\n  anchor-name: --anchor;  \r\n}\r\n.target {\r\n  position: absolute;\r\n  position-anchor: --anchor;\r\n  left: anchor(center);\r\n  top: anchor(bottom);\r\n  transform: translate(-50%, 8px);\r\n}<\/pre>\n<p>\u6b64\u65f6\u7684\u6548\u679c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-22_232945.png\" width=\"394\" height=\"331\" alt=\"\u56fe\u7247\u5c45\u4e2d\u6309\u94ae\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<h5>2. \u5168\u65b0\u7684\u5bf9\u9f50\u5c5e\u6027\u503canchor-center<\/h5>\n<p><code>anchor-center<\/code>\u662f <code>justify-self<\/code>\u3001<code>align-self<\/code>\u3001<code>justify-items<\/code> \u548c <code>align-items<\/code>\u7b49\u5c5e\u6027\u65b0\u652f\u6301\u7684\u4e00\u4e2a\u503c\uff0c\u4e13\u95e8\u7528\u5728\u951a\u70b9\u5b9a\u4f4d\u4e2d\uff0c\u53ef\u4ee5\u8ba9\u5143\u7d20\u5c45\u4e2d\u5bf9\u9f50\u663e\u793a\uff0c\u4f8b\u5982\u8fd8\u662f\u4e0a\u9762\u540c\u6837\u7684HTML\uff0c\u5219CSS\u8fd9\u6837\u5c31\u53ef\u4ee5\u6c34\u5e73\u5c45\u4e2d\u4e86\u3002<\/p>\n<pre>.trigger2 {\r\n   anchor-name: --anchor2;  \r\n}\r\n.target2 {\r\n  position: absolute;\r\n  position-anchor: --anchor2;\r\n  \/* left: anchor(center); *\/\r\n  top: anchor(bottom);\r\n  justify-self: anchor-center;\r\n}<\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u4e24\u8005\u533a\u522b\u5f88\u5c0f\u3002\u6548\u679c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-22_235200.png\" width=\"383\" height=\"278\" alt=\"\u6309\u94ae\u5bf9\u9f50\u622a\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4ee5\u4e0a\u4e24\u79cd\u5c45\u4e2d\u65b9\u6cd5\u5747\u6709\u5b9e\u4f8b\u9875\u9762\u53ef\u4ee5\u8bbf\u95ee\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-anchor-position-center-demo.php\" rel=\"noopener\" target=\"_blank\">CSS\u5c45\u4e2d\u951a\u70b9\u5b9a\u4f4d\u6548\u679cdemo<\/a><\/p>\n<p><strong>\u66f4\u65b0\u4e8e2026\u5e743\u67084\u65e5<\/strong><\/p>\n<p><code>justify-self<\/code>\u5c5e\u6027\u7684\u6e32\u67d3\u7b56\u7565\u53d1\u751f\u4e86\u53d8\u5316\uff0c\u9700\u8981<code>left<\/code>\u6216\u8005<code>right<\/code>\u7684\u5c5e\u6027\u503c\u662f<code>auto<\/code>\u624d\u53ef\u4ee5\u751f\u6548\u3002<\/p>\n<h5>3. inset-area\u5c5e\u6027\u5b9e\u73b0<\/h5>\n<p>inset-area\u5c5e\u6027\u662fCSS\u951a\u70b9\u5b9a\u4f4d\u4e13\u6709\u5c5e\u6027\uff0c\u8fd9\u4e2a\u503c\u5f97\u5355\u72ec\u5f00\u4e00\u4e2a\u6807\u9898\u8bb2\u8ff0\u3002<\/p>\n<p><strong>\u66f4\u65b0\u4e8e2026\u5e743\u67084\u65e5<\/strong><\/p>\n<p><code>inset-area<\/code>\u5c5e\u6027\u88ab\u5e9f\u5f03\uff0c\u73b0\u5728\u7684\u5c5e\u6027\u540d\u79f0\u662f<code>position-area<\/code>\uff0c\u8bed\u6cd5\u4e0d\u53d8\u3002<\/p>\n<h3>\u4e94\u3001inset-area\u4e0e\u951a\u70b9\u5b9a\u4f4d\u8fb9\u886c\u533a<\/h3>\n<p>\u951a\u70b9\u5b9a\u4f4d\u7684\u5b9a\u4f4d\u9664\u4e86\u4f7f\u7528\u6d6e\u5c42\u5143\u7d20\u7684\u5b9a\u4f4d\u5c5e\u6027\uff08left\/bottom\/left\/right\uff09\u5b9e\u73b0\u5916\uff0c\u8fd8\u53ef\u4ee5\u5728\u76ee\u6807\u5143\u7d20\u4e0a\u4f7f\u7528inset-area\u5c5e\u6027\u8fdb\u884c\u5e03\u5c40\uff0c\u8fd9\u79cd\u65b0\u7684\u5e03\u5c40\u673a\u5236\u6709\u4e2a\u65b0\u540d\u79f0\uff0c\u53eb\u505a\u201c\u8fb9\u886c\u533a\u5e03\u5c40\u201d\u3002<\/p>\n<p>\u6b64\u5e03\u5c40\u7684\u7406\u89e3\u79bb\u4e0d\u5f00\u4e5d\u5bab\u683c\uff0c\u5176\u4e2d\uff0c\u4e5d\u5bab\u683c\u7684\u4e2d\u5fc3\u5c31\u662ftrigger\u5143\u7d20\uff0ctrigger\u5143\u7d20\u7684\u5916\u56f4\u67094\u4e2a\u65b9\u5411\uff0c\u51718\u4e2a\u683c\u5b50\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<div style=\"position:relative;width:240px; height: 240px;\"><s style=\"position:absolute;height:100%;border-left: 1px solid gray;left:33.3%;\"><\/s><s style=\"position:absolute;height:100%;border-left: 1px solid gray;left:66.6%;\"><\/s><s style=\"position:absolute;width:100%;border-top: 1px solid gray;top:33.3%;\"><\/s><s style=\"position:absolute;width:100%;border-top: 1px solid gray;top:66.6%;\"><\/s><span style=\"position:absolute;width:33.3%; height:33.3%;inset:0;margin:auto;background:#34538b;border-radius:50%;display:grid;place-items:center;font-size: 40px;color:#fff;\">\u2693\ufe0e<\/span><\/div>\n<p>\u5176\u4e2d\uff0c\u6bcf\u4e2a\u65b9\u5411\u7684\u683c\u5b50\u67096\u79cd\u7ec4\u5408\uff0c\u6bcf\u4e00\u79cd\u7ec4\u5408\u5bf9\u5e94\u4e00\u4e2a<code>inset-area<\/code>\u5c5e\u6027\u503c\uff0c\u6263\u9664\u91cd\u590d\u7684\u503c\uff0c\u603b\u5171\u670920\u79cd\u4e0d\u540c\u7684\u8fb9\u886c\u533a\u5e03\u5c40\u3002<\/p>\n<p>\u800c\u5177\u4f53\u65b9\u4f4d\u5b9a\u4f4d\u5173\u7cfb\u5bf9\u5e94\u7684<code>inset-area<\/code>\u5c5e\u6027\u503c\u5219\u53ef\u4ee5\u70b9\u51fb\u4e0b\u9762\u5404\u4e2a\u5217\u8868\u8fdb\u884c\u4f53\u9a8c\uff08\u5efa\u8baeChrome\u6d4f\u89c8\u5668\u4e0b\u4f53\u9a8c\uff0c\u76ee\u524d\u624b\u673a\u4e2d\u53ef\u80fd\u6ca1\u6548\u679c\uff09\u3002<\/p>\n<p><iframe allowfullscreen=\"true\" allowtransparency=\"true\" frameborder=\"no\" height=\"580\" loading=\"lazy\" scrolling=\"no\" src=\"\/study\/202406\/css-inset-area-tool.html\" style=\"border: 2px dashed dimgray; width: 100%\" data-title=\"\u951a\u5b9a\u5de5\u5177\"><\/iframe><\/p>\n<p>\u4e0a\u9762\u7684\u6f14\u793a\u6e90\u81ea anchor-tool.com \u8fd9\u4e2a\u7f51\u7ad9\uff0c\u5982\u679c\u4e0a\u9762\u7684\u7f51\u7ad9\u65e0\u6cd5\u8bbf\u95ee\uff0c\u5927\u5bb6\u53ef\u4ee5<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-inset-area-tool.html\" rel=\"noopener\" target=\"_blank\">\u8bbf\u95ee\u6b64\u5907\u4efd\u5730\u5740<\/a>\uff0c\u6211\u81ea\u5df1\u5f04\u7684\uff0c\u8c28\u9632\u8ff7\u8def\u3002<\/p>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u5982\u679c\u5e0c\u671b\u6d6e\u5c42\u5143\u7d20\u5728\u4e0b\u65b9\u5c45\u4e2d\u5bf9\u9f50\uff0c\u53ea\u8981\u7ed9\u6d6e\u5c42\u5143\u7d20\u8bbe\u7f6e\u5982\u4e0bCSS\u4ee3\u7801\u5c31\u53ef\u4ee5\u4e86\uff1a<\/p>\n<pre>.float-element {\r\n  inset-area: bottom;\r\n}<\/pre>\n<p>\u56fe\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-25_001351.png\" width=\"508\" height=\"304\" alt=\"\u5c45\u5e95\u5c45\u4e2d\u5b9a\u4f4d\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u9700\u8981\u6ce8\u610f\uff0c\u503c\u662fbottom\uff0c\u4e0d\u662fbottom center\u3002<\/p>\n<p>\u5728CSS &lt;position&gt;\u7c7b\u578b\u7684\u5c5e\u6027\u503c\u4e2d\uff0cbottom\u7b49\u540c\u4e8ebottom center\uff0c\u4f8b\u5982<code>background-position<\/code>\uff0c<code>transform-origin<\/code>\u7b49\u5c5e\u6027\uff0c\u4f46\u662f<code>inset-area<\/code>\u5c5e\u6027\u5374\u4e0d\u662f\u8fd9\u6837\u7684\u3002<\/p>\n<p>bottom\u8868\u793a\u6a2a\u8de8\u4e5d\u5bab\u683c\u5e95\u90e8\u4e09\u4e2a\u683c\u5b50\uff0c\u800cbottom center\u4ec5\u8868\u793a\u5360\u636e\u5e95\u90e8\u4e2d\u95f4\u90a3\u4e00\u4e2a\u683c\u5b50\uff0c\u4e24\u8005\u533a\u522b\u660e\u663e\u3002<\/p>\n<h3>\u516d\u3001\u4f7f\u7528 anchor-size() \u8bbe\u7f6e\u5143\u7d20\u5927\u5c0f<\/h3>\n<p>\u5982\u679c\u4f60\u5e0c\u671b\u6d6e\u5c42\u5143\u7d20\u7684\u5c3a\u5bf8\uff0c\u548c\u951a\u70b9\u5143\u7d20\u7684\u5c3a\u5bf8\u6709\u67d0\u79cd\u56fa\u5b9a\u7684\u8054\u7cfb\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528<code>anchor-size()<\/code>\u51fd\u6570\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>anchor-size() = anchor-size( &lt;anchor-element&gt;? &lt;anchor-size&gt;, &lt;length-percentage&gt;? )\r\n&lt;anchor-size&gt; = width | height | block | inline | self-block | self-inline<\/pre>\n<p>\u4f8b\u5982\uff0cLuLu UI\u4e2d\u7684<code>&lt;select&gt;<\/code>\u4e0b\u62c9\u6a21\u62df\u6846\u7684\u5bbd\u5ea6\u7ed9\u6309\u94ae\u7684\u5bbd\u5ea6\u4e00\u81f4\uff0c\u5982\u679c\u4f7f\u7528CSS\u951a\u70b9\u5b9a\u4f4d\uff0c\u5219\u5c31\u53ef\u4ee5\u4f7f\u7528<code>anchor-size()<\/code>\u51fd\u6570\u5b9e\u73b0\u3002<\/p>\n<p>\u6838\u5fc3\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<pre>&lt;button popovertarget=\"select\"&gt;\r\n    \u8bf7\u9009\u62e9\r\n&lt;\/button&gt;\r\n&lt;menu id=\"select\" popover&gt;\r\n    &lt;li&gt;\u8bf7\u9009\u62e9&lt;\/li&gt;\r\n    &lt;li&gt;\u9009\u98791&lt;\/li&gt;\r\n    &lt;li&gt;\u9009\u98792&lt;\/li&gt;\r\n    &lt;li&gt;\u9009\u98793&lt;\/li&gt;\r\n&lt;\/menu&gt;<\/pre>\n<pre>button {\r\n    anchor-name: --anchor-select;\r\n    position: relative;\r\n    width: fit-content;    \r\n}\r\nmenu:popover-open {\r\n    position: absolute;\r\n    position-anchor: --anchor-select;\r\n    left: anchor(left);\r\n    top: anchor(bottom);\r\n    width: anchor-size(width);\r\n    margin-top: -1px;\r\n}<\/pre>\n<p>\u5728\u6b64\u6848\u4f8b\u4e2d\uff0c\u70b9\u51fb\u663e\u793a\u9690\u85cf\u4e0e\u9876\u5c42\u7279\u6027\u4f7f\u7528popover\u7279\u6027\u5b9e\u73b0\uff0c\u5b9a\u4f4d\u548c\u5bbd\u5ea6\u8bbe\u7f6e\u4f7f\u7528CSS\u951a\u70b9\u5b9a\u4f4d\u3002<\/p>\n<p>\u5176\u4e2d\uff0c<code>anchor-size(width)<\/code>\u4fdd\u8bc1\u4e86\u4e0b\u62c9\u5217\u8868\u7684\u5bbd\u5ea6\u4e00\u76f4\u548c\u951a\u70b9\u6309\u94ae\u4fdd\u6301\u4e00\u81f4\u3002<\/p>\n<p>\u6211\u4e13\u95e8\u505a\u4e86\u4e2a\u6f14\u793a\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-anchor-size-select-demo.php\" rel=\"noopener\" target=\"_blank\">CSS anchor-size()\u51fd\u6570\u6a21\u62df\u4e0b\u62c9\u6846demo<\/a><\/p>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5217\u8868\u5bbd\u5ea6\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-25_235620.png\" width=\"84\" height=\"240\" alt=\"\u9ed8\u8ba4\u5217\u8868\u5bbd\u5ea6\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5f53\u9009\u62e9\u4e00\u4e2a\u957f\u5185\u5bb9\u9009\u9879\u540e\uff0c\u5217\u8868\u5bbd\u5ea6\u5c31\u4f1a\u8ddf\u7740\u53d8\u5bbd\u4e86\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-06-25_235635.png\" width=\"179\" height=\"238\" alt=\"\u5217\u8868\u9879\u5bbd\u5ea6\u53d8\u5bbd\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u8fd9\u5c31\u662f<code>anchor-size()<\/code>\u51fd\u6570\u7684\u4f5c\u7528\uff0c\u8ba9\u6d6e\u5c42\u5143\u7d20\u548c\u951a\u70b9\u5143\u7d20\u7684\u5c3a\u5bf8\u4ea7\u751f\u5173\u8054\u3002<\/p>\n<p>\u53e6\u5916\uff0c<code>anchor-size()<\/code>\u51fd\u6570\u8fd8\u53ef\u4ee5\u548c<code>calc()<\/code>\u7b49\u6570\u5b66\u51fd\u6570\u4e00\u8d77\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.float-element {\r\n   max-height: calc(anchor-size(--some-anchor height) * 2);\r\n}<\/pre>\n<p>\u8868\u793a\u5143\u7d20<code>.float-element<\/code>\u7684\u6700\u5927\u9ad8\u5ea6\u4e3a\u540d\u4e3a<code>--some-anchor<\/code>\u7684\u951a\u70b9\u5143\u7d20\u7684\u9ad8\u5ea6\u7684\u4e24\u500d\u3002<\/p>\n<p>\u662f\u4e0d\u662f\u770b\u8d77\u6765\u633a\u9ad8\u7ea7\u7684\u3002<\/p>\n<h4>\u548cpopover\u5f39\u51fa\u5c42\u914d\u5408\u4f7f\u7528<\/h4>\n<p>\u4ece\u4e0a\u9762\u7684\u4f8b\u5b50\u4e0d\u96be\u770b\u51fa\uff0c\u951a\u70b9\u5b9a\u4f4d\u548cpopover\u5f39\u51fa\u5c42\u5929\u7136\u914d\u5408\u65e0\u95f4\uff0c\u9ec4\u91d1\u642d\u6863\u3002\u524d\u8005\u5b9a\u4f4d\uff0c\u540e\u8005\u663e\u9690\u4e0e\u5c42\u7ea7\u63a7\u5236\uff0c\u51e0\u4e4e\u6db5\u76d6\u4e86\u5f39\u51fa\u5c42\u5b9a\u4f4d\u7684\u5168\u90e8\u4ea4\u4e92\u3002<\/p>\n<p>\u5728\u65e5\u540e\uff0c\u4e00\u5b9a\u4f1a\u6210\u4e3a\u6d6e\u5c42\u5b9a\u4f4d\u7684\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n<p>\u6240\u4ee5\uff0cpopover\u5927\u5bb6\u4e00\u5b9a\u8981\u638c\u63e1\uff0c\u5177\u4f53\u53ef\u53c2\u89c1\u6211\u4e4b\u524d\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2024\/01\/js-html-popover-dropdown\/\">\u65f6\u4ee3\u53d8\u4e86\uff0c\u8be5\u4f7f\u7528\u539f\u751fpopover\u5c5e\u6027\u6a21\u62df\u4e0b\u62c9\u4e86<\/a>\u201d\u3002<\/p>\n<h3>\u4e03\u3001\u4f7f\u7528 @position-try \u8c03\u6574\u951a\u70b9\u4f4d\u7f6e<\/h3>\n<p>\u6d6e\u5c42\u5b9a\u4f4d\u7ecf\u5e38\u4f1a\u9047\u5230\u4e00\u4e2a\u573a\u666f\uff0c\u90a3\u5c31\u662f\u6d4f\u89c8\u5668\u6eda\u52a8\uff0c\u6216\u8005\u5c3a\u5bf8\u7f29\u653e\u7684\u65f6\u5019\uff0c\u6d6e\u5c42\u4f1a\u8d85\u51fa\u89c6\u7a97\u7684\u8fb9\u754c\uff0c\u6b64\u65f6\u6700\u597d\u53ef\u4ee5\u81ea\u52a8\u8c03\u6574\u5b9a\u4f4d\u7684\u4f4d\u7f6e\uff0c\u4ee5\u83b7\u5f97\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p>\u5728\u8fc7\u53bb\uff0c\u6211\u4eec\u662f\u4f7f\u7528JS\u5b9e\u65f6\u8ba1\u7b97\u5b9e\u73b0\u7684\u3002<\/p>\n<p>\u73b0\u5728\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528<code>@position-try<\/code>\u89c4\u5219\u4ee5\u53ca<code>position-try-options<\/code>\u5c5e\u6027\u5b9e\u73b0\u3002<\/p>\n<p>\u8fd8\u662f\u56fe\u7247\u5bf9\u9f50\u6309\u94ae\u7684\u4f8b\u5b50\uff0c\u6211\u4eec\u90e8\u5206\u5c06\u9ed8\u8ba4\u7684\u5bf9\u9f50\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u6309\u94ae\u5728\u6587\u5b57\u7684\u53f3\u4fa7\uff0c\u7136\u540e\u4f7f\u7528<code>@position-try<\/code>\u89c4\u5219\u589e\u52a0\u4e86\u4e00\u4e2a\u5019\u8865\u5b9a\u4f4d\u89c4\u5219\uff0c\u4e5f\u5c31\u662f\u8d85\u51fa\u89c6\u7a97\u5c3a\u5bf8\u7684\u65f6\u5019\uff0c\u9876\u90e8\u5b9a\u4f4d\u3002<\/p>\n<p>\u4e8e\u662f\u5c31\u6709\u5982\u4e0b\u6240\u793a\u7684CSS\u4ee3\u7801\uff1a<\/p>\n<pre>.trigger {\r\n    anchor-name: --my-anchor;    \r\n}\r\n.target {\r\n    position: absolute;\r\n    position-anchor: --my-anchor;\r\n    inset-area: right span-bottom;\r\n    \/* \u5019\u8865\u4f4d\u7f6e\u9009\u9879 *\/\r\n    position-try-options: --bottom-left;\r\n}\r\n\/* \u5019\u8865\u4f4d\u7f6e *\/\r\n@position-try --bottom-left {\r\n  inset-area: bottom span-left;\r\n}<\/pre>\n<p>\u6b64\u65f6\uff0c\u5c31\u4f1a\u6709\u5982\u4e0b\u5f55\u5236\u89c6\u9891\u6240\u793a\u7684\u6548\u679c\uff0c\u5373\uff0c\u62d6\u52a8\u6309\u94ae\uff0c\u6b64\u65f6\u56fe\u7247\u4f1a\u8ddf\u968f\u6309\u94ae\u79fb\u52a8\uff0c\u7136\u540e\u548c\u6d4f\u89c8\u5668\u7684\u53f3\u8fb9\u7f18\u63a5\u89e6\u7684\u65f6\u5019\uff0c\u56fe\u7247\u5b9a\u4f4d\u53d1\u751f\u53d8\u5316\uff0c\u53d8\u6210\u6309\u94ae\u7684\u5de6\u4e0b\u89d2\u5b9a\u4f4d\u3002<\/p>\n<p><video src='\/\/image.zhangxinxu.com\/video\/blog\/202406\/img-position-try.mp4' type=\"video\/mp4\" width=\"480\" height=\"292\" preload=\"auto\" muted autoplay autobuffer loop x-webkit-airplay=\"allow\" x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\" x5-video-orientation=\"portraint\" webkit-playsinline=\"true\" playsinline=\"true\" \u200b\u200b\u200b\u200bposter=\"\/\/image.zhangxinxu.com\/image\/blog\/201806\/poster.png\"><\/video><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-anchor-position-try-demo.php\" rel=\"noopener\" target=\"_blank\">CSS\u951a\u70b9\u5b9a\u4f4dposition-try\u81ea\u52a8\u91cd\u5b9a\u4f4ddemo<\/a><\/p>\n<h4>\u7ec6\u8282<\/h4>\n<ul>\n<li>\u4f7f\u7528<code>@position-try<\/code>\u89c4\u5219\u547d\u540d\u5019\u8865\u5b9a\u4f4d\u7684\u65f6\u5019\uff0c\u9700\u8981\u4ee5\u4e24\u4e2a\u77ed\u6a2a\u7ebf\u5f00\u5934\uff0c\u7c7b\u4f3c\u53d8\u91cf\u7684\u547d\u540d\uff0c\u5176\u4ed6\u524d\u7f00\u65e0\u6548\uff1b<\/li>\n<li><code>@position-try<\/code>\u89c4\u5219\u5185\u53ef\u4ee5\u8bbe\u7f6e\u951a\u70b9\u5b9a\u4f4d\u4ee5\u5916\u7684CSS\u5c5e\u6027\uff0c\u4f8b\u5982<code>margin<\/code>\u3001<code>transform<\/code>\u7b49\u5c5e\u6027\uff1a\n<pre>@position-try --bottom {\r\n  margin: var(--padding) 0 0 var(--padding);\r\n  inset-area: bottom;\r\n}<\/pre>\n<\/li>\n<\/ul>\n<h4>position-try-options\u5173\u952e\u5b57\u5c5e\u6027\u503c<\/h4>\n<p><code>position-try-options<\/code>\u5c5e\u6027\u8fd8\u652f\u6301\u5173\u952e\u5b57\u5c5e\u6027\u503c\uff0c\u5982 <code>flip-block<\/code> \u548c<code> flip-inline<\/code>\u5c5e\u6027\uff0c\u4e14\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\u53ef\u4ee5\u7ec4\u5408\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>position-try-options: flip-block, flip-inline, flip-block flip-inline<\/pre>\n<p>\u8868\u793a\u5982\u679c\u8fb9\u754c\u6ea2\u51fa\uff0c\u5c1d\u8bd5\u5782\u76f4\u7ffb\u8f6c\u3001\u6216\u8005\u6c34\u5e73\u7ffb\u8f6c\uff0c\u6216\u8005\u6c34\u5e73\u5782\u76f4\u540c\u65f6\u7ffb\u8f6c\u3002<\/p>\n<p>\u4f7f\u7528\u5173\u952e\u5b57\u81ea\u52a8\u7ffb\u8f6c\u7684\u597d\u5904\u662f\uff0c\u4e0d\u9700\u8981\u518d\u4f7f\u7528<code>@position-try<\/code>\u89c4\u5219\u8fdb\u884c\u81ea\u5b9a\u4e49\uff0c\u4ee3\u7801\u66f4\u52a0\u7b80\u5355\u65b9\u4fbf\uff0c\u53ef\u4ee5\u5e94\u4ed8\u5927\u591a\u6570\u5e38\u89c4\u7684\u9700\u6c42\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u4e0a\u9762\u63d0\u5230\u7684\u81ea\u5b9a\u4e49<code>&lt;select&gt;<\/code>\u4e0b\u62c9\u5143\u7d20\uff0c\u5176\u8fb9\u754c\u6ea2\u51fa\u53ea\u9700\u8981\u8003\u8651\u5782\u76f4\u65b9\u5411\uff0c\u56e0\u6b64\uff0c\u76f4\u63a5\u4e00\u884c\u4e0b\u9762\u7684CSS\u4ee3\u7801\u5c31\u53ef\u4ee5\u4e86\uff1a<\/p>\n<pre>.ui-select-list {\r\n  position-try-options: flip-block;\r\n}<\/pre>\n<h4>position-try-order<\/h4>\n<p>\u5f53\u6211\u4eec\u8bbe\u7f6e\u591a\u4e2a\u5019\u8865\u5b9a\u4f4d\u7684\u65f6\u5019\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u4f7f\u7528<code>position-try-order<\/code>\u5c5e\u6027\u786e\u5b9a\u54ea\u4e2a\u5019\u8865\u5b9a\u4f4d\u4f18\u5148\u6267\u884c\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u662f\u8d8a\u524d\u9762\u7684\u8d8a\u5148\u5339\u914d\u3002<\/p>\n<p><strong>\u8865\u5145\u4e8e2024-07-04<\/strong><\/p>\n<p>\u62d2\u548c\u89c4\u8303\u793e\u533a\u8d70\u5f97\u6bd4\u8f83\u8fd1\u7684\u4eba\u58eb\u53cd\u9988\uff0c<code>position-try-order<\/code>\u5c5e\u6027\u7684\u540d\u79f0\u4e4b\u540e\u4f1a\u4fee\u6539\u4e3a<code>position-try-fallbacks<\/code>\u3002<\/p>\n<h3>\u516b\u3001position-visibility\u4e0e\u6eda\u52a8\u6ea2\u51fa\u663e\u9690<\/h3>\n<p>\u8fd9\u4e5f\u662f\u4e2a\u975e\u5e38\u68d2\u7684\u7279\u6027\uff0c\u4ee5\u524d\u7ecf\u5e38\u9047\u5230tips\u63d0\u793a\u65e0\u6cd5\u51fa\u73b0\u5728\u6eda\u52a8\u533a\u57df\u4e4b\u5916\u7684\u95ee\u9898\uff0c\u73b0\u5728\u597d\u4e86\uff0c\u6709\u4e2a\u591a\u79cd\u663e\u9690\u7b56\u7565\u53ef\u4f9b\u9009\u62e9\uff0c\u8fd9\u4e2a\u5c31\u662f<code>position-visibility<\/code>\uff0c\u6839\u636e\u6211\u7684\u6d4b\u8bd5\uff0c\u6b64\u5c5e\u6027\u76ee\u524d\u4ec5\u53ef\u4ee5\u7528\u5728\u951a\u70b9\u5b9a\u4f4d\u573a\u666f\u4e2d\uff0c\u4ee5\u540e\u6709\u53ef\u80fd\u4f1a\u6269\u5c55\u5230\u666e\u901a\u5143\u7d20\u573a\u666f\u3002<\/p>\n<h4>\u8bed\u6cd5<\/h4>\n<pre>position-visibility: always;\r\nposition-visibility: anchors-visible;\r\nposition-visibility: no-overflow;<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<p>\u2b24 <code>always<\/code>\u662f\u9ed8\u8ba4\u884c\u4e3a\uff0c\u8868\u793a\u4e00\u76f4\u663e\u793a\uff0c\u663e\u9690\u72b6\u6001\u4e0e\u951a\u70b9\u5143\u7d20\u6216\u6d6e\u5c42\u5143\u7d20\u7684\u4f4d\u7f6e\u65e0\u5173\uff0c\u5728\u5b50\u5bb9\u5668\u6eda\u52a8\u7684\u65f6\u5019\uff0c\u8981\u4e48\u4e00\u8d77\u8ddf\u7740\u6eda\u8d70\uff0c\u8981\u4e48\u6eda\u52a8\u7684\u65f6\u5019\u7eb9\u4e1d\u4e0d\u52a8\uff08\u770b\u5b9a\u4f4d\u5143\u7d20\u5728\u5b50\u6eda\u52a8\u5143\u7d20\u7684\u91cc\u9762\u8fd8\u662f\u5916\u9762\uff0c\u4ee5\u53ca\u5305\u542b\u5757\u7684\u5173\u7cfb\uff09\u3002<\/p>\n<p>\u5047\u8bbe\u5b9a\u4f4d\u5143\u7d20\u5728\u5b50\u6eda\u52a8\u7684\u91cc\u9762\uff0c\u4e14\u5176\u7edd\u5bf9\u5b9a\u4f4d\u5305\u542b\u5757\u5c31\u662f\u6eda\u52a8\u5bb9\u5668\uff0c\u5219\u53ef\u4ee5\u770b\u5230\u5927\u81f4\u5982\u4e0bGIF\u6240\u793a\u7684\u6548\u679c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/always2.gif\" width=\"368\" height=\"220\" alt=\"always\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u2b24 <code>anchors-visible<\/code>\u5219\u8868\u793a\uff0c\u5982\u679c\u951a\u70b9\u5143\u7d20\u5728\u6eda\u52a8\u5bb9\u5668\u5185\u5b8c\u5168\u4e0d\u53ef\u89c1\uff0c\u5219\u5b9a\u4f4d\u5143\u7d20\u4e5f\u53d8\u5f97\u4e0d\u53ef\u89c1\u3002\u6b64\u503c\u53ef\u80fd\u4f1a\u51fa\u73b0\u5b9a\u4f4d\u5143\u7d20\u5728\u5b50\u6eda\u52a8\u5bb9\u5668\u5916\u90e8\u663e\u793a\u7684\u60c5\u51b5\uff0c\u5982\u4e0bGIF\u6548\u679c\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/anchors-visible.gif\" width=\"363\" height=\"249\" alt=\"anchors-visible\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u2b24 <code>no-overflow<\/code>\u5219\u662f\u770b\u5b9a\u4f4d\u5143\u7d20\u4f4d\u7f6e\u7684\uff0c\u5982\u679c\u5b9a\u4f4d\u5143\u7d20\u89e6\u78b0\u5230\u4e86\u5b50\u6eda\u52a8\u5bb9\u5668\u7684\u8fb9\u754c\uff0c\u5219\u5b9a\u4f4d\u5143\u7d20\u6d88\u5931\u4e0d\u53ef\u89c1\uff0c\u5982\u4e0b\u5f55\u5c4f\u52a8\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/no-overflow.gif\" width=\"363\" height=\"249\" alt=\"no-overflow\u4f5c\u7528\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>GIF\u52a8\u56fe\u6548\u679c\u4e0d\u5982\u4eb2\u81ea\u4f53\u9a8c\u611f\u53d7\u6765\u5f97\u771f\u5207\uff0c\u6240\u6709\uff0c\u5982\u679c\u60a8\u73b0\u5728\u4f7f\u7528\u7684\u662fChrome\u6d4f\u89c8\u5668\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202406\/css-position-visibility-demo.php\" rel=\"noopener\" target=\"_blank\">CSS position-visibility\u4e0e\u6eda\u52a8\u8fb9\u754c\u663e\u9690demo<\/a><\/p>\n<h3>\u4e5d\u3001\u5176\u4ed6\u4ee5\u53ca\u7ed3\u675f\u8bed<\/h3>\n<p>\u6211\u5728\u60f3\uff0c\u6709\u6ca1\u6709\u53ef\u80fd\u5c06\u73b0\u6709\u7ec4\u4ef6\u4f7f\u7528CSS\u951a\u70b9\u5b9a\u4f4d\u6539\u9020\u7684\u53ef\u80fd\u6027\uff0c\u4e00\u601d\u91cf\uff0c\u8fd8\u771f\u7684\u53ef\u884c\u3002<\/p>\n<p>\u4fdd\u6301\u73b0\u6709\u7684\u7ec4\u4ef6JavaScript\u4ee3\u7801\u4e0d\u53d8\uff0c\u5728\u524d\u9762\u5199\u4e0a\u4e00\u53e5\uff1a<\/p>\n<pre>if (CSS.supports('anchor-name: --myanchor')) {\r\n    return;\r\n}<\/pre>\n<p>\u7136\u540e\u5b9a\u4f4d\u5168\u90fd\u4ea4\u7ed9CSS\u5b9e\u73b0\uff0c\u5c82\u4e0d\u5999\u54c9\u3002<\/p>\n<p>\u6709\u610f\u601d\uff0c\u6709\u610f\u601d\uff0c\u62bd\u4e2a\u65f6\u95f4\u8bd5\u8bd5\u770b\u3002<\/p>\n<p>OK\uff0cOK\uff0c\u5c31\u8bf4\u8fd9\u4e48\u591a\u5427\uff0c\u65ad\u65ad\u7eed\u7eed\u5199\u4e86\u4e24\u5468\uff0c\u957f\u7bc7\u5927\u4f5c\uff0c\u7a00\u7f3a\u5e72\u8d27\uff0c\u6b22\u8fce\u70b9\u8d5e\uff0c\u6b22\u8fce<button onclick=\"shareWeixin.click()\" class=\"entry-share-btn\">\u5206\u4eab<\/button>\u3002<\/p>\n<p>\u53c2\u8003\u6587\u7ae0\uff1a<a href=\"https:\/\/developer.chrome.com\/blog\/anchor-positioning-api?hl=zh-cn\" rel=\"noopener\" target=\"_blank\">CSS Anchor Positioning API \u7b80\u4ecb<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/2024-6-27_231634.jpeg\" width=\"123\" height=\"113\" alt=\"\u5999\u554a\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11215\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=11215<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202406\/anchor-cover.png\" width=\"160\" height=\"101\" alt=\"CSS\u951a\u70b9\u5b9a\u4f4d\u5360\u4f4d\u5c01\u9762\u56fe\" class=\"alignright size-medium\" loading=\"lazy\" \/><\/p>\n<p>CSS\u951a\u70b9\u5b9a\u4f4d\u5e94\u8be5\u662f2024\u5e74\u6700\u671f\u5f85\u7684CSS\u65b0\u7279\u6027\u4e86\uff0c\u65ad\u65ad\u7eed\u7eed\u4e24\u5468\u624d\u5199\u5b8c\uff0c\u4eca\u5929\u5fc5\u987b\u8981\u5e26\u5927\u5bb6\u957f\u957f\u89c1\u8bc6\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1980,276,1978,215,1981,1935,1952,1982,1979,533,581,444,1977],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11215"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=11215"}],"version-history":[{"count":4,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11215\/revisions"}],"predecessor-version":[{"id":12137,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11215\/revisions\/12137"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=11215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=11215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=11215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}