請考慮這個例子：(

working example)

樣式聲明：

body {background:#333;font:1em Arial,Helvetica,sans-serif;}

h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}

h2 {font-weight:normal;font-size:1.15em;

padding-bottom:5px;border-bottom:1px solid #999;}

p {padding-right:1em;color:#000;}

pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {position:absolute;width:100px;height:100px;background:#ececec;

overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;

border-right:1px solid #000;border-top:1px solid #fff;

border-left:1px solid #fff;}

.css {float:right;width:50%;}

.markup {float:left;width:50%;margin-right:-1px;}

.Box1,.Box2,.Box3,.Box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}

.Box1 {left:0;top:-20px;}

.Box2 {right:0;top:0;}

.Box3 {left:0;bottom:0;}

.Box4 {right:-20px;bottom:-20px;}

overflow:hidden and absolutely positioned elements

Box 1Box 2Box 3Box 4

如您所見,Box1和Box4被剪裁.如何讓它們在包含div的邊界外可見？基本上這些框應該像工具提示一樣顯示(它們必須是頁面上最頂層的元素).

關于首選解決方案的標準：

>沒有標記修改

>沒有使用CSS3

>跨瀏覽器工作

>必須保留帶有id包裝器的div

絕對定位,必須保持溢出：隱藏

編輯：我知道我的要求很難,但我必須與他們合作.我必須在一個我無法完全控制的環境中解決這個任務.

編輯#2：好的,這就是為什么我需要在標記中不重新定位框.在具體情況下,我想將它們用作其他元素的工具提示(特別是BeautyTips). DOM樹中工具提示的位置是庫內部工作的結果.當我想使用BeautyTips時,我的例子中可以看到的問題阻止了整個工具提示的顯示：它被剪裁了.

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html隐藏定位,html – 如何使绝对定位(溢出：隐藏)容器的绝对定位的子项显示在其父项区域之外？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。