請(qǐng)考慮這個(gè)例子：(

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被剪裁.如何讓它們?cè)诎琩iv的邊界外可見？基本上這些框應(yīng)該像工具提示一樣顯示(它們必須是頁面上最頂層的元素).

關(guān)于首選解決方案的標(biāo)準(zhǔn)：

>沒有標(biāo)記修改

>沒有使用CSS3

>跨瀏覽器工作

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

絕對(duì)定位,必須保持溢出：隱藏

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

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

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。