html - 相对定位的 child 覆盖父轮廓

Question

我遇到了以下问题。可以接收选项卡焦点的父元素内相对定位的子元素略微溢出父 div，并隐藏一些父元素的选项卡焦点轮廓。在 Chrome 上，这个轮廓被部分隐藏，而在 IE 上，这个轮廓被子元素完全隐藏。

请参阅附带的 JSFiddle:https://jsfiddle.net/55h4wtrc/7/ .

.parent {
  padding: 0;
  border: none;
  margin-bottom: 10px;
}

.child {
  background: #fff;
  border: 1px solid #eee;
  position: relative;
  height: 40px;
  line-height: 40px;
}

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

<div class='parent' tabindex='0'>
  <div class='child'>text</div>
</div>

从 .child 中删除 CSS 行 position: relative; 可修复此错误行为。

在我的例子中，我需要轮廓完全可见，我还需要子元素相对定位。我还需要子元素具有比其父元素更高的 z-index，因此修复此错误的 z-index 技巧将不起作用。

有什么想法吗？

Answer 1

原因

从 CSS Basic User Interface Level 3 specification 开始:

1. Outlines do not take up space.

以后

The stacking of the rendering of these outlines is explicitly left up to implementations to provide a better user experience per platform. [...]

这意味着浏览器在渲染轮廓方面相当自由。如果在相关元素的边界内呈现它们，它们可能会被子元素覆盖。

缓解

您可以将自定义样式应用于轮廓，使用 outline 和 outline-offset 属性在焦点期间手动设置颜色、样式和位置，如 this JSFiddle 所示，例如

.parent:focus {
  outline: hotpink dashed 2px;
  outline-offset: 2px;
}

如果这还不行，你不妨使用一个完全不同的工具，比如box-shadow，如this JSFiddle所示，例如

.parent:focus {
  outline: none;
  box-shadow: 0 0 2px 2px teal;
}