Why fixed positioned element is not over a relative one?

usergr8m1 0
Viewed 35

You can look at here my site: https://tikex-wp-demo.com/adventi-kezmuvesnap/ Need to press on the "Belépés" button to see phenomenon. Or check here screen shot.

relative over static, why?

A fixed positioned div is used for login component with Facebook and Google login buttons. In somehow second row go over the login screen. How is it possible?

I have following css, tried to set a high z-index, but seem it has no effect.

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    z-index: 5;
    background-color: white;
    border: 1px solid #f9f9f9;
    padding: 30px;

    background: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: rgba(0, 1, 0, 0) 0px 0px 0px 1px,
        rgba(0, 0, 0, 0.15) 0px 5px 25px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px;
}
css-position css
1 Answers

Static is the default positioning for elements. Relative-positioned elements are relative to their parent element. From your website link, it appears that is true for the main body of the page. However, further down the page there are other elements that overlap it.

Are they also within the parent? Is their code written before or after the div?

With the little information provided, I'd simply advise placing the login popup box at the very bottom of your code or set it's positioning to "absolute" and in it's css, add a "z-index".

popup.div{
position: absolute;
z-index: 100;
top: [whichever variables that brings it to where you want];
left: [whichever variables that brings it to where you want];
}

Sources from W3Schools:

J. O'Ceallacháin0
Related