允许子元素在父元素的边界之外渲染，同时仍然尊重父元素的滚动

Question

我在可滚动父元素中有一个子元素。

我希望子级随着父级的滚动而移动。如果我将孩子相对于父母定位，我就可以做到这一点。

但我也希望孩子能够表现出来，即使它超出了父母的界限。如果我将孩子相对于祖父母定位，我就可以做到这一点。

我怎样才能同时做这两件事？

    #grandparent {
        width: 200px;
        height: 200px;
        outline: 5px red solid;
        padding: 10px;
        position: relative;
    }

    #parent {
        outline: 2px solid blue;
        height: 100%;
        overflow: auto;
        position: relative;
    }

    #popup-target {
        outline: 1px solid orange
    }

    #popup-target:not(:hover) ~ #popup {
        display: none;
    }

    #popup {
        position: fixed;
        outline: 1px solid gold;
        background-color: lightgray;
        width: 100px;
    }

<div id="grandparent">
    <div id="parent">
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div id="popup-target">hover me</div>
        <div id="popup">
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
            <div>popup</div>
        </div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
        <div>text</div>
    </div>
</div>

Answer 1

可通过

transform

实现。

#grandparent {
  width: 200px;
  height: 200px;
  outline: 5px red solid;
  padding: 10px;
  position: relative;
}

#parent {
  outline: 2px solid blue;
  height: 100%;
  overflow: auto;
  position: relative;
}

.popup-target {
  outline: 1px solid orange
}

.popup-target:not(:hover)+.popup {
  display: none;
}

.popup {
  position: fixed;
  outline: 1px solid gold;
  background-color: lightgray;
  width: 100px;
  translate: 220px;
}

<div id="grandparent">
  <div id="parent">
    <div>text</div>
    <div class="popup-target">hover me</div>
    <div class="popup">
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
    </div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div class="popup-target">hover me</div>
    <div class="popup">
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
      <div>popup</div>
    </div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
  </div>
</div>