如何顯示這是由其母公司的溢出遮擋的子元素：隱藏式的設置

我有我在想，如果有可能克服一個相當怪異的情景。如何顯示這是由其母公司的溢出遮擋的子元素：隱藏式的設置

我有固定尺寸，其也樣式爲「overflow:hidden」一個HTML塊元素。我想定位一個div，它是這個元素的嵌套子元素的一個特定的偏移量。子div的大小與其父級相同。由於父級是「overflow：hidden」，因此只要溢出其邊界，它就會剪切子div。有沒有辦法通過一些聰明的CSS技巧來防止這種裁剪？

<div style="background-color:RED; width:100px; height:100px; overflow: hidden; position: relative;"> 
    <!-- Notice the child is 100 x 100 px and is clipped by the parent's overflow:hidden; styling--> 
    <div style="background-color:BLUE; width:100px; height:100px; position: absolute; top: 70px;left: 70px; z-index: 1000;"></div> 
</div>

我被某些約束條件的限制，並且不能鬆動上親本"overflow:hidden;"設置或打破兩個元件之間的父 - 子關係的DOM。將孩子定位爲「職位：固定」也不是一種選擇。

這裏的link to JSFiddle顯示的問題。

來源

2014-02-27 Ashwin Prabhu

請檢查該http://jsfiddle.net/FLRu2/3/。我已經從父'div'移除了'position：relative'。 – Pugazh

你可以提供一些關於限制你的約束的更多信息嗎？不知道爲什麼你必須執行約束條件，我們不能推薦任何技巧來解決你的問題。 –

@SyncCircles :)謝謝，但不幸的是，這也不是一個選項，因爲父元素也被定位。 –

不，overflow: hidden非常清晰，那是一個元素夾及其內容，不允許這樣。您必須選擇您列出的選項之一。

你可以或者克隆子元素，它使得它坐落在完全相同的位置作爲原始元素的位置，但與許多元素或場景中的子元素必須移動或更改頁面和克隆必須跟上原件，這可能是不可行的。

來源

2014-02-27 05:54:59 BoltClock

克隆是一個好主意，我也考慮過它，如果沒有任何工作，克隆可能是唯一的選擇。 –

兩個想法你：

實驗與溢出：初始屬性。我不知道你有什麼特定的佈局，但是最初會設置一個css值爲它的默認值，即使另一個規則層疊在它上面。看到這個例子：http://www.w3schools.com/cssref/css_initial.asp。警告：不IE瀏覽器友好。
查看是否使用clearfix仍然會滿足你的約束。下面有兩個例子。

What is a clearfix?

Make child visible outside an overflow:hidden parent

來源

2014-02-27 06:16:57

如何顯示這是由其母公司的溢出遮擋的子元素：隱藏式的設置

回答

相關問題