[CSS] position:absolute에서 overflow:hidden 일부 hidden 영역 넘어가기

 

 

 

1. 상황

 

이미지를 타원으로 만들려면 overflow: hidden; 이 필요하다. 이 타원 안에 사각형 박스를 띄우고 싶은데 타원 밖을 넘어갈 수가 없다. 이런 상황에서 박스를 타원 밖으로 나가게 만들고 싶다.

 

 

 

 

2. 해결

 

부모와 자식 하나만 두고 작업하게 되면 해결이 안된다.

그 사이에 양부모를 하나 더 만들어서 기능을 나눠서 집어 넣게 되면 해결이 가능하다.

( 대신 parent와 parent-parent의 사이즈가 동일하게 지정해줘야한다. )

 

 

See the Pen Untitled by tjdsksro90 (@tjdsksro90) on CodePen.