绝对定位元素的Tab-Index在布局中的作用

Question

绝对定位元素的Tab Index

暂且假设我编写了以下代码：

    <header class="header hap" [ngClass]="authority">
        <div class="header-inner">
            <div class="header-identity">
                <a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
                    <img src="assets/logo-white.svg" alt="Logo">
                </a>
                <span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
                    <img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
                </span>
                [ more links ]
            </div>
            <nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
                <button class="menu" (click)="toggleMenu()">Menu</button>
                <div class="main-nav-flyout" *ngIf="showMenu">
                    <div class="nav-header">
                        <ul>
                            <li>
                                <a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
                            </li>
                            [ more dropdown items ]
                        </ul>
                        <a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
                    </div>
                    <div class="nav-body">
                        <ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
                            <li class="current-app">Administrative Tools</li>
                            <li><a id="main-nav-xAdmin" *ngIf="user.isTheAdmin()" [routerLink]="['admin/x']">X Admin</a></li>
                            [ more links ]
                            <li>
                                <span>Reports</span>
                                <ul>
                                    <li class="user-status"><a id="main-nav-userStatusReport" [routerLink]="['admin/reports/userStatus']">User Status</a></li>
                                    [ more links ]
                                </ul>
                            </li>
                        </ul>
                        <ul class="app-list" *ngIf="user.userApplications">
                            <li *ngIf="showTheLink()">
                                <a id="app-list-type" [routerLink]="['/']">
                                    ...
                                </a>
                            </li>
                            [ more links ]
                            <li *ngFor="let application of user?.userApplications">
                                <a id="app-list-{{application.abbreviation}}" *ngIf="!isAdminApp(application)" (click)="onClickMenuItem(application)">
                                    {{ application.title }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <nav class="user-nav for authenticated" role="menu">
                <span *ngIf="user.brandingName" class="user-location">{{user.brandingName}}</span>
                <span *ngIf="user.brandingName" class="pipe">|</span>
                <a id="user-nav-profile" class="user-name" [routerLink]="['/profile']">
                    <span class="name">{{user?.firstName}} {{user?.lastName}}</span>
                </a>
                <a id="user-nav-logout" class="logout" [routerLink]="['/', 'logout']">Log out</a>
            </nav>
        </div>
    </header>

问题

各种元素--可能是.header-inner > *--都使用了position: absolute;进行样式设置，因此在标记中后声明但在布局中先几何定位的元素的tabindex顺序会被扭曲。

问题

有没有一种方法可以强制使用自然索引(0)的所有tabindex，除了需要切换的2个项目，以可扩展的方式来实现，在布局中不必为每个新项目实现tabindex？

- Cody

Answer 1

短答案是不行，如果只交换两个元素，则至少需要将流中必须在这两个元素之前聚焦的每个元素添加tabindex。

所有具有正值tabindex的元素都将按增量方式优先聚焦，或者按它们的源顺序聚焦，如果它们具有相同的值，则所有默认值或零值的元素都将最后聚焦。

因此，如果您有6个可聚焦元素，并且您希望在聚焦元素1和2之后聚焦元素5和6，则需要像这样做：

<input type="text" tabindex="1">1</input>
<input type="text" tabindex="1">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>

通常情况下，让源代码顺序与流程相匹配是使其正常工作的最简单方法。

有一种特殊情况更加简单。如果您想要移动的元素恰好是页面上需要焦点的第一个元素，则可以仅在这些元素上放置tabindex。

例如，如果我们希望元素5和6成为页面上的第一个元素，其他所有内容在它们之后，您只需执行以下操作：

<input type="text">1</input>
<input type="text">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>

一般来说，如果您想要改变顺序的元素位于页眉中，并且它们是页面上应该首先被关注的元素，那么重新排列它们并让页面的其余部分自然流动应该很容易。

如果这些元素必须放在最后，您可以选择以下两种方法之一：

- 在标记中将它们放在最后，以便它们自然流动。 - 使用tabindex=-1将它们从流程中移除，让用户手动聚焦。

- Jens