如何在父绝对元素上设置绝对位置？
[英]How to set position absolute on the parent absolute element?
问题描述
Need help on achieving following UI. 
在实现以下用户界面方面需要帮助。 Displaying inner child element out/top of the parent element which is having position absolute. 在位置绝对的父元素的顶部/顶部显示内部子元素。 Is this achievable using CSS? 使用CSS可以实现吗？
Note : I can't remove overflow property from the css.. (.absolute1) block having lot of data at least i have to give overflow-y:scroll; 注意 ：我无法从具有大量数据的css ..（。absolute1）块中删除溢出属性，至少我必须给overflow-y：scroll;。
This is what I have tried JSFIddle 这就是我尝试过的JSFIddle
div.relative { position:relative; border:3px solid #73AD21; height:350px; width:550px; z-index:111; } .absolute1 { position:absolute; border:2px solid skyblue; width:200px; height:150px; z-index:555; overflow:auto; } .absolute2 { box-shadow:2px 2px 2px 2px #CCC; width:50px; height:50px; position:absolute; right:0; top:0; z-index:999; background:yellow; margin-right:-25px; }
<div class="relative"> Test data Test Data Test Data <div class="absolute1"> SomedataT Data Test Data Test data Test Data Test DataTest data Test Data <div class="absolute2"> top 2 </div> </div> </div>
3 个解决方案
解决方案1
2 2017-11-02 07:08:31
Remove overflow:auto in .absolute1 class. 在.absolute1类中删除overflow:auto 。 and wrap content of absolute1 in div and give it to overflow:auto . 并将absolute1内容包装在div中，然后将其提供给overflow:auto 。
div.relative { position: relative; border: 3px solid #73AD21; height:350px; width:550px; z-index:111; padding: 15px; } .absolute1 { position:absolute; border:2px solid skyblue; width:200px; height:150px; z-index:555; } .absolute1_desc{ overflow:auto; } .absolute2 { box-shadow:2px 2px 2px 2px #CCC; width:50px; height:50px; position:absolute; right:0; top:0; z-index:999; background:yellow; margin-right:-25px; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="relative"> Test data Test Data Test Data <div class="absolute1"> <div class="absolute1_desc">SomedataT Data Test Data Test data Test Data Test DataTest data Test Data </div> <div class="absolute2"> top 2 </div> </div> </div> </body> </html>
解决方案2
1 2017-11-02 07:35:52
Keep content in absolute1 in another div called absolute3 with styles given and remove border to absolut1 and margin-right:-25px to absolut2 在给定样式的另一个div将内容保留在absolute1中的absolute3 ，并删除absolut1 border和absolut1 margin-right:-25px的absolut2
div.relative { position:relative; border:3px solid #73AD21; height:350px; width:550px; z-index:111; } .absolute1 { position:absolute; padding-right:25px; width:200px; height:150px; z-index:555; overflow:auto; } .absolute3 { position:absolute; right:25px; top:0; bottom:0; border:2px solid skyblue; } .absolute2 { box-shadow:2px 2px 2px 2px #CCC; width:50px; height:50px; position:absolute; right:0; top:0; z-index:999; background:yellow; }
<div class="relative"> Test data Test Data Test Data <div class="absolute1"> <div class="absolute3"> SomedataT Data Test Data Test data Test Data Test DataTest data Test Data </div> <div class="absolute2"> top 2 </div> </div> </div>
解决方案3
1 2017-11-02 07:41:51
You'll need to nest another element within .absolute1 and declare your overflow rules to this nested element instead, as demonstrated in the embedded code snippet below: 您需要在.absolute1内嵌套另一个元素， .absolute1此嵌套元素声明overflow规则，如下面的嵌入式代码片段所示：
/* Additional */
.absolute1 .text-wrapper {
overflow: auto;
height: 100%;
}
div.relative { position: relative; border: 3px solid #73AD21; height:350px; width:550px; z-index:111; } .absolute1 { position:absolute; border:2px solid skyblue; width:200px; height:150px; z-index:555; } /* Additional */ .absolute1 .text-wrapper { overflow: auto; height: 100%; } .absolute2 { box-shadow:2px 2px 2px 2px #CCC; width:50px; height:50px; position:absolute; right:0; top:0; z-index:999; background:yellow; margin-right:-25px; }
<div class="relative"> layer 1 <div class="absolute1"> <div class="text-wrapper"> Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2vLayer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2vvvLayer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 Layer 2 </div> <div class="absolute2"> top 2 </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.