[css] position: absoulute and relative

코드

.contents__section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 20px;
    margin: 5px;
    border-top: 5px solid rgba(255, 255, 255, 0.416);
    margin-top: 20px;
    padding-top: 20px;    
}

.card__area {
    position: relative;
    width: 200px;
    height: 300px;
    border-radius: 5px 5px 0 0;
    background: transparent;
    backdrop-filter: blur(20px);
    box-shadow:
        8px 8px 15px rgba(0, 0, 0, 0.3),
        -4px -4px 10px rgba(255, 255, 255, 0.2);
}
.card__area:hover {
    cursor: pointer;
}
.card__area:active {
    transform: translateY(2px);
}
.card__area:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    background: linear-gradient(to top, rgba(209, 255, 215, 0.459), transparent);
    transition: height 0.3s ease;
}
.card__area:hover:before {
    height: 100%;
}

현상

safari 브라우저에서는 position:relative , position:absolute가 다르게 작동한다.

아래처럼 hover 하면 전체 영역에 배경이 잡히는 경우가생긴다.

문제는 

크롬에서는 별도성정이 필요없지만, 

- contents__section 영역에 position:relative

- card__area:before 영역에 position:absolute