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

בניית אתרים וחוויית משתמש >> תוכן מקצועי

קבלו סוף סוף את התמונות הזוכות!
אמרנו יום שלישי שנהפך לרביעי ואז עוד שבוע שהתארך לשבועיים, מה באמת קרה? כבר סיפרנו לכם שחלק מהשופטים חלו בקורונה ולקח זמן עד שחזרו לעצמם במעט...
גם אתם שמתם לב שרק עכשיו הגיעה הקולקציה החדשה למדפים? הסוד המלא נחשף לראשונה, ועל הדרך טריק לניצול קופונים.
אם אתן מאלו שהבילוי שלהם הוא סיור בגאולה וברבי עקיבא, לסרוק ולמשש את חלונות הראווה, יכלתן לזהות השנה דיליי חריג במועד השקת הקולקצייה החדשה לחג...
1.00 star(s) 1 ratings
הדרך להייטק עוברת בבני ברק
מרחב עבודה הצפוף בנשים חרדיות שיושבות וכותבות קוד, הוא לא מראה שכיח. לפני כמה שנים היו שאמרו שהוא גם לא אפשרי.
4.00 star(s) 1 ratings
מאחורי העמק | חלק ג'
"פסולה" "לא נכון" "עכשיו תורך לאחוז!" לכל אחת יש את הזיכרון המתוק הזה מהמשחקים הנוסטלגיים שהיוו חלק גדול מנוף ילדותינו, זיכרון שמעלה חיוך שעה...
5.00 star(s) 1 ratings

ש.ב.ח.

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


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

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

UU

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

נטול עץ

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
פיתוח / אפיון / עיצוב אתרים
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 החיצוני
 

לוח נדל"ן | למכירה והשכרה

לוח מודעות | קניה מכירה

לוח דרושים

למעלה