Skip to content

Commit 5b54c6a

Browse files
committed
[css-anchor-positioning-1] Add position-fallback-bounds to address #8724
1 parent 8d381d8 commit 5b54c6a

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

css-anchor-position-1/Overview.bs

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,6 +1090,73 @@ This limit must be <em>at least</em> five.
10901090
</pre>
10911091
</div>
10921092

1093+
Applying Stronger Fallback Bounds: the 'position-fallback-bounds' property {#fallback-bounds}
1094+
--------------------------------------------------------------------------
1095+
1096+
When an element using [=anchor positioning=]
1097+
is using ''position: absolute'',
1098+
it determines whether or not it's overflowing
1099+
(and thus should try a different fallback position)
1100+
by looking at its (scroll-adjusted) [=inset-modified containing block=].
1101+
By carefully selecting where in the DOM
1102+
the positioned element lives,
1103+
and what element establishes its containing block,
1104+
you can choose a useful element
1105+
to use for its overflow bounds.
1106+
1107+
When using ''position: fixed'',
1108+
or things like the Popover API
1109+
that use the [=top layer=],
1110+
you lose this ability;
1111+
their containing block is always the viewport
1112+
or the root element's containing block.
1113+
The 'position-fallback-bounds' property
1114+
restores this ability,
1115+
allowing an element to explicitly select
1116+
what element it wants to use
1117+
for checking overflow against.
1118+
1119+
<pre class=propdef>
1120+
Name: position-fallback-bounds
1121+
Value: normal | <<dashed-ident>>
1122+
Initial: normal
1123+
Applies to: [=absolutely positioned=] elements
1124+
Inherited: no
1125+
Animation type: discrete
1126+
</pre>
1127+
1128+
<dl dfn-type=value dfn-for=position-fallback-bounds>
1129+
: <dfn>normal</dfn>
1130+
:: The element uses its normal (scroll-adjusted, inset-modified) containing block
1131+
to determine if it's overflowing
1132+
for the purpose of selecting a [=position fallback list=] entry.
1133+
1134+
: <<dashed-ident>>
1135+
::
1136+
Let |target| be a [=target anchor element=],
1137+
given this element
1138+
and the <<dashed-ident>>.
1139+
1140+
If |target| doesn't exist,
1141+
this behaves as ''position-fallback-bounds/normal''.
1142+
1143+
If |target| exists,
1144+
treat |target| as if it establishes an [=automatic positioning containing block=].
1145+
Let |target rect| be that containing block,
1146+
scroll-adjusted if necessary.
1147+
1148+
When [=determining the position fallback styles=] of the element,
1149+
compare it to <em>both</em> its normal containing block
1150+
and to |target rect|,
1151+
and treat it as overflowing if it overflows <em>either</em> rectangle.
1152+
</dl>
1153+
1154+
Issue: I need an editorial rewrite of the scroll-adjusted concept
1155+
so I can properly invoke it here.
1156+
1157+
1158+
1159+
10931160
Fallback and Automatic Positioning {#fallback-automatic}
10941161
----------------------------------
10951162

0 commit comments

Comments
 (0)