CSS בעיה ביחסי תורשה וגנטיות

[ש.ב.ח.]

יש לי אלמנט שמוגדר כמיקום מוחלט בתחתית המסך, הגובה שלו ממוקסם והוא מוגדר לגלילה עם התוכן עולה על ההגובה (overflow).
בתוכו למעלה יש אלמנט כפתור שאני מעוניין שבעיצוב הוא יופיע כמחציתו על האזור לעיל ומחציתו על הדף כמו זה:


בעצם הכפתור אמור להיות במיקום יחסי ולעלות מעלה אל מעל האזור שלו בחצי מגובהו, לא מסובך... אלא ש...הבעיה שמכיוון ואלמנט האב מוגדר כגלילה - הכפתור נסתר מעינינו הגשמיות.. כך:

אפשרות הz-index לא הועילה במאום...
מי יעזור?

 

[UU]

מכיוון שהוא יוצא מעבר לתוכן העוטף אותו.
ויש משהו מעליו (לא תמיד עוזר z-index מכל מיני סיבות של עומק ה-HTML)
יתכן שיעזור לתת margin-top לחלק השחור, בגובה אותו רוצים שהחלק הלבן יבלוט
לא הבנתי מה זה קשור לגלילה.

 

[Naftali Stein]

overflow בתפקידו לנהל את התוכן שגולש מהאלמנט, ברגע שמגדירים אותו scroll, זה הוא הופך לגלילה ומסתיר את התוכן הגולש במקרה שלנו הכפתור.

לא קשור ל z- index כלל.

הפתרון הוא לעטוף בעוד אלמנט, להגדיר לשניהם גובה זהה ורק לפנימי להגדיר את ה overflow, הכפתור יושב באלמנט האב, ובא לציון גואל...

מצורף דוגמא של הקוד...
https://jsfiddle.net/4zw3xfem/1/

 

[ש.ב.ח.]

הפתרון הוא לעטוף בעוד אלמנט, להגדיר לשניהם גובה זהה ורק לפנימי להגדיר את ה overflow, הכפתור יושב באלמנט האב, ובא לציון גואל...

כל זה אם אנו מתעסקים בהכתבה מדויקת לגודל, מה שכאן אני צריך להתחשב בדינמיות של האזור התחתון שמשתנה לפי התוכן שלו ולפיו להניח את הכפתור... והלך לציון מושיע....

יכול להיות שהאפשרות היחידה היא לחשב בכל תזוזת מסך את רוחב התחתון וכך להגדיר את העליון(איפה שהכפתור יושב) - כמובן בJS, איך?

ראה כאן
https://jsfiddle.net/sbc640964/2gkjf5wx/

 

[UU]

לקח לי שניה בדיוק...
https://jsfiddle.net/dp0kbwf1/

סה"כ העברתי 2 שורות ב-CSS ל-ID אחר.
ככה
#inner{
max-height: 18vh;
overflow-y: auto;
}

וכמובן למחוק את השורות האילו מה-DIV החיצוני