Vị trí tuyệt đối và ẩn tràn

Chúng tôi có hai DIV, một cái được nhúng trong cái kia. Nếu DIV bên ngoài không được định vị tuyệt đối thì DIV bên trong, được định vị tuyệt đối, không tuân theo ẩn tràn của DIV bên ngoài ( ví dụ ).

Có bất kỳ cơ hội nào để làm cho DIV bên trong tuân theo ẩn tràn của DIV bên ngoài mà không đặt DIV bên ngoài ở vị trí tuyệt đối không (vì điều đó sẽ làm hỏng bố cục hoàn chỉnh của chúng tôi)? Ngoài ra vị trí tương đối cho DIV bên trong của chúng tôi không phải là một tùy chọn vì chúng tôi cần "phát triển" ra một bảng TD ( exmple ).

Có sự lựa chọn nào khác không?

Hãy ngoài <div>đến position: relativevà bên trong <div>để position: absolute. Nó sẽ làm việc cho bạn.

Còn position: relativeđối với div bên ngoài thì sao? Trong ví dụ che giấu cái bên trong. Nó cũng sẽ không di chuyển nó trong bố cục của nó vì bạn không chỉ định đỉnh hoặc trái.

Một yếu tố được định vị tuyệt đối thực sự được định vị liên quan đến relativecha mẹ hoặc cha mẹ tương đối được tìm thấy gần nhất. Vì vậy, phần tử với overflow: hiddennên nằm giữa relativevà absolutecác phần tử định vị:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Bạn chỉ cần làm divnhư thế này:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Tôi hy vọng mã này sẽ giúp bạn :)