爲DIV內部溢出創建疊加：隱藏DIV無裁剪

diagram showing div layout I'd like 爲DIV內部溢出創建疊加：隱藏DIV無裁剪

大家好。我希望能夠突出顯示溢出的容器DIV中的div：隱藏集（更改這不是一個選項）。我使用CSS'outline'和'box-shadow'屬性來執行此操作。問題是，當DIV是外部div的完整大小時，您看不到它被選中，因爲大綱（不出所料）會被剪裁到外部div。另外，如果內部div違反問題發生的邊緣之一。

附加的圖像顯示了div的佈局，紅色是外部div，紫色是'outline'，黑色是我想要突出顯示的DIV - 在這個例子中，左邊的紫色突出部分被剪切。

所以問題是，有沒有一種方法（JavaScript的& jQuery是好的）與另一個div覆蓋黑色div，使得（a）覆蓋div不會被剪裁到外部div，以及（b）何時黑色div移動或調整大小，覆蓋層移動/調整大小？

編輯：它看起來像這樣根本就不可能在HTML/CSS中以我描述的方式。

來源

2011-12-13 Ben Clayton

將blackb div設置爲「positon：relative」。然後將大綱放入該div中，並將其設置爲「position：absolute」。隨着頂部，左邊，和高度，你可以把它放在黑色格子的「周圍」。

編輯：

斯里，黑色的div也必須是絕對的位置。工作示例在這裏看到： http://jsfiddle.net/t94FV/

來源

2011-12-13 13:50:51 Flo

Thanks Flo。不幸的是，'紫色div'仍然使用這個技術被剪切到外部div - 除非我錯過了一些東西。 –

編輯我的答案 – Flo

Cheers Flo。令人遺憾的是，這種方法可以防止黑色div被剪輯 - 發生的情況是黑色div相對於身體被定位，而不是紅色div。嘗試在你的jsfiddle中設置黑色div的左側或頂部（例如，向左：0;頂部：0;）.. :-(感謝您嘗試！ –

也許你可以使用百分比的利潤率。

來源

2011-12-13 13:46:48 Spikey21

訣竅是隻在父母的div與相對位置。沒有position:relativeoverflow:hidden div的子女。只有父母！

<div class="trick-container" style="position:relative"> 
    <div class="overflow-hidden" style="overflow:hidden"> 
     <div class="no-relative-position-1"> 
      <div class="no-relative-position-2"> 
       <div class="no-relative-position-N"> 
        <div class="position-absolute" style="position:absolute"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-07-26 14:24:09 oleg

爲DIV內部溢出創建疊加：隱藏DIV無裁剪

回答

相關問題