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

הנושא בפורום 'קהילת מפתחי אתרי אינטרנט' פורסם ע"י ש.ב.ח., ‏4/9/19.

  1. ש.ב.ח.

    ש.ב.ח. משתמש מקצוען פיתוח / אפיון / עיצוב אתרים עיצוב גרפי

    הצטרף:
    ‏9/8/17
    הודעות:
    556
    תודות :
    533
    נקודות:
    196
    יש לי אלמנט שמוגדר כמיקום מוחלט בתחתית המסך, הגובה שלו ממוקסם והוא מוגדר לגלילה עם התוכן עולה על ההגובה (overflow).
    בתוכו למעלה יש אלמנט כפתור שאני מעוניין שבעיצוב הוא יופיע כמחציתו על האזור לעיל ומחציתו על הדף כמו זה:
    [​IMG]

    בעצם הכפתור אמור להיות במיקום יחסי ולעלות מעלה אל מעל האזור שלו בחצי מגובהו, לא מסובך... אלא ש...הבעיה שמכיוון ואלמנט האב מוגדר כגלילה - הכפתור נסתר מעינינו הגשמיות.. כך:
    [​IMG]
    אפשרות הz-index לא הועילה במאום...
    מי יעזור?
     
  2. UU

    UU משתמש מקצוען פיתוח / אפיון / עיצוב אתרים

    הצטרף:
    ‏10/10/18
    הודעות:
    1,273
    תודות :
    7,640
    נקודות:
    184
    מכיוון שהוא יוצא מעבר לתוכן העוטף אותו.
    ויש משהו מעליו (לא תמיד עוזר z-index מכל מיני סיבות של עומק ה-HTML)
    יתכן שיעזור לתת margin-top לחלק השחור, בגובה אותו רוצים שהחלק הלבן יבלוט
    לא הבנתי מה זה קשור לגלילה.
     
  3. נטול עץ

    נטול עץ משתמש מקצוען פיתוח / אפיון / עיצוב אתרים

    הצטרף:
    ‏25/11/16
    הודעות:
    312
    תודות :
    389
    נקודות:
    103
    overflow בתפקידו לנהל את התוכן שגולש מהאלמנט, ברגע שמגדירים אותו scroll, זה הוא הופך לגלילה ומסתיר את התוכן הגולש במקרה שלנו הכפתור.

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

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

    מצורף דוגמא של הקוד...
    https://jsfiddle.net/4zw3xfem/1/
     
    jaffa ו-mordy מודים על התגובה.
  4. ש.ב.ח.

    ש.ב.ח. משתמש מקצוען פיתוח / אפיון / עיצוב אתרים עיצוב גרפי

    הצטרף:
    ‏9/8/17
    הודעות:
    556
    תודות :
    533
    נקודות:
    196
    כל זה אם אנו מתעסקים בהכתבה מדויקת לגודל, מה שכאן אני צריך להתחשב בדינמיות של האזור התחתון שמשתנה לפי התוכן שלו ולפיו להניח את הכפתור... והלך לציון מושיע....

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

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

    UU משתמש מקצוען פיתוח / אפיון / עיצוב אתרים

    הצטרף:
    ‏10/10/18
    הודעות:
    1,273
    תודות :
    7,640
    נקודות:
    184
    לקח לי שניה בדיוק...
    https://jsfiddle.net/dp0kbwf1/

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

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