html隐藏定位,html – 如何使绝对定位(溢出:隐藏)容器的绝对定位的子项显示在其父项区域之外?...
請(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html3D效果可以在手机打开吗,手机怎
- 下一篇: 2021华宁三五班高考成绩查询,2021