How to set position absolute on the parent absolute element?
Question
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?
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;
This is what I have tried 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 answers
solution1
2 2017-11-02 07:08:31
Remove overflow:auto in .absolute1 class. and wrap content of absolute1 in div and give it to 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>
solution2
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.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>
solution3
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:
/* 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.